Week 14B: Dashboarding with Panel and the Holoviz Ecosystem¶

December 8, 2021

Last class!¶

Feedback on proposals via email by the end of the week
Final project due: end of day on Monday, December 20

Final project details: https://github.com/MUSA-550-Fall-2021/final-project

Office Hours Next Week¶

I'll hold office hours next week during the regular class slots:

Monday, Dec 13 from 6 to 7:30pm
Wednesday, Dec 15 from 6 to 7:30pm

Details

Zoom link and appointment slots are available on Canvas
If you can't make these times, please email me and we'll find a time to discuss

Wrapping up with Panel¶

Quick API demo: the "cars" dataset¶

More info available on the docs

import hvplot.pandas
from bokeh.sampledata.autompg import autompg # cars dataset

autompg.head()

# Set up a function to plot using hvplot
def autompg_plot(x='mpg', y='hp', color='#058805'):
    return autompg.hvplot.scatter(x, y, c=color, padding=0.1)

columns = list(autompg.columns[:-2])
columns

['mpg', 'cyl', 'displ', 'hp', 'weight', 'accel', 'yr']

The default panel import¶

# Load panel and enable interactive features
import panel as pn
pn.extension()

1. Interact Functions¶

The interact function will magically generate a UI (including widgets) automatically by inspecting the arguments of the function given to it.

In the case below, we give the autompg_plot() the allowed options for its 3 arguments x, y, and color, and it auto-generates a Panel dashboard.

# Create a widget to select the color of the scatter points
color = pn.widgets.ColorPicker(name='Color', value='#4f4fdf')

# Auto-generate the layout
layout = pn.interact(autompg_plot, x=columns, y=columns, color=color)

# Create the dashboard with a Row and Column
interact_dashboard = pn.Row(
                        pn.Column('## MPG Explorer', layout[0]), 
                        layout[1]
                    )
interact_dashboard

2. Reactive Functions¶

Very similar to the interact API but is more explicit about widget selection and layout.
You must use the pn.bind function to select and configure widgets explicity and to lay out components explicitly.
The pn.bind() function explicitly binds the values of the widgets to the arguments of a function.

# Create the widgets
x = pn.widgets.Select(value="mpg", options=columns, name="x")
y = pn.widgets.Select(value="hp", options=columns, name="y")
color = pn.widgets.ColorPicker(name="Color", value="#AA0505")

# Create the dashboard
reactive_dashboard = pn.Column(
    pn.Row(
        pn.Column("## MPG Explorer", x, y, color), # Title and widgets
        pn.bind(autompg_plot, x=x, y=y, color=color), # Main chart
    ),
    pn.Row(
        pn.Column("<h1>MPG Explorer</h1>", x, y, color), # Title and widgets
        pn.bind(autompg_plot, x=x, y=y, color=color), # Main chart
    ),
)

reactive_dashboard

3. Parametrized Classes¶

You are welcome to use any of the APIs to create dashboards for the final project. However, this is the recommended approach (although I recognize it's a bit more complex than options #1 and #2).

We'll define our app in a declarative fashion using a custom Python class that defines the various components of our dashboard, which include:

The parameters we want the user to be able to change.
Reactive functions to generate the various charts/maps in our dashboard, based on those input parameters.
The dependencies between our chart functions and parameters.

Note: The example apps on our course Github page use the class API to define the dashboard.

import param

# Define the class
class MPGExplorer(param.Parameterized):
    """A Panel dashboard class."""

    x = param.Selector(default='mpg', objects=columns)
    y = param.Selector(default='hp', objects=columns)
    color = param.Color(default='#0f0f0f')
    
    @param.depends('x', 'y', 'color') # This is a Python "decorator"!
    def make_autompg_plot(self):
        return autompg_plot(self.x, self.y, self.color)

# Initialize the dashboard class object
explorer = MPGExplorer()

# Create the dashboard layout
# Note: widgets are stored in the 'param' attribute by default
class_dashboard = pn.Row(explorer.param, explorer.make_autompg_plot)

class_dashboard

Note that when we change the selections above, the attributes of the explorer object update:

explorer.x

'mpg'

explorer.y

'hp'

Great examples on their documentation¶

I'd encourage you to spend some time reading through their documentation...

Documentation homepage
User Guide
- An overview of the concepts powering Panel dashboards
App Gallery
- Examples of end-to-end apps using Panel
Reference Gallery
- Examples (code snippets) for the many different kinds of components possible in Panel dashboards
Awesome Panel
- Github repository of resources and information on Panel
- Awesome Panel gallery of example apps

Note: Dashboard Templates¶

Panel has recently added default layout templates to provide a simple, well-designed layout for the dashboard. They are all very similar and break the layout into various pieces, including the:

Title
Sidebar
Main content

Examples:

See more: https://panel.holoviz.org/user_guide/Templates.html

Two example repositories on the course's Github¶

Example 1: Philadelphia shootings¶

Tools: Panel, Hvplot/Holoviews, Altair, Folium
This includes two separate apps: app1.ipynb and app2.ipynb

https://github.com/MUSA-550-Fall-2021/philadelphia-shootings-app

Example 2: NYC Taxi Trips¶

Tools: Panel, Hvplot/Holoviews, Altair, Datashader
This includes a single app: app.ipynb

https://github.com/MUSA-550-Fall-2021/datashader-nyc-taxi-app

Summary: Web-based visualization options for the final project¶

Github Pages
Panel

See notes in this week's repository: https://github.com/MUSA-550-Fall-2021/week-14/blob/main/WebVisualizationOptions.md

Deployment Options¶

See notes in this week's repository: https://github.com/MUSA-550-Fall-2021/week-14/blob/main/DeploymentOptions.md

That's it!¶

Reminder: Office Hours Next Week¶