Week 14B: Dashboarding with Panel and the Holoviz Ecosystem

December 8, 2020

Last class!

• Wrapping up feedback on proposals now — should get feedback in the next few days if you haven't yet
• Final project due: 5pm on Monday, December 21st

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

Office Hours Next Week

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

• Tuesday, Dec 15 from 6 to 7:30pm
• Thursday, Dec 17 from 6 to 7:30pm

Details

• Zoom link is available on Canvas
• No appointments, just drop in and we'll do a breakout room to chat
• If you can't make these times, please email me and we'll find a time to discuss

Today: Panel

Two example apps

We'll walk through two examples that can serve as reference/templates for the final project:

1. Visualizing recent shootings in Philadelphia using Altair, Folium, and Holoviews
2. Visualizing NYC taxi trips with Datashader and Altair

Recommended Viewing

PyData talk in Dec 2019 from the creator of Panel:

https://www.youtube.com/watch?v=Ohr29FJjBi0

But first: an introduction to Python classes

Let's take a quick look at this nice tutorial

Back to Panel...

Dashboard apps in Panel

• Panel contains multiple different APIs to create interactive dashboards.
• See the docs for more info

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.

Similar workflow to Dash

• User changes some paramters via widgets
• The dashboard knows which charts depends on those parameters
• The necessary functions are executed to properly update the dashboard

This is a reactive workflow.

Panel key concepts

1. Panes
   • A Pane wraps external viewable items like Bokeh, Plotly, Vega/Altair, or HoloViews plots, so they can be embedded in a dashboard. When the wrapped object or any parameter changes, a pane will update the view accordingly.
2. Parameters
   • A wrapper for the values the user selects, which determines which Panes get updated and which data is shown in the dashboard
3. Panels
   • Layout objects allow combining plots into a Row, Column, Tabs or a Grid.

Overall, the concepts are similar to Dash: a layout piece and a reactive parameter/callback piece

Default Templates

• Panel has recently (a few weeks ago!) added default layout templates to provide a simple, well-designed layout for the dashboard.
• Unfortunately, they don't work when deploying the apps on Binder (see this issue) — we won't use them in our examples, but they look very promising!

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

The Param library

• As we will see, the Param library allows you to declare the parameters of a dashboard in a declarative manner (similar to Dash).
• Declare the type of parameter you need and get the corresponding widget in your dashboard for free!
• Many many examples: https://panel.holoviz.org/user_guide/Param.html

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

Two example repositories on the course's Github

Example 1: Philadelphia shootings

Tools: Panel, Hvplot/Holoviews, Altair, Folium

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

Example 2: NYC Taxi Trips

Tools: Panel, Hvplot/Holoviews, Altair, Datashader

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

Web-based visualization options for the final project

• Github Pages
• Flask/Dash
• Panel

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

Deployment Options

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

That's it!

Reminder: Office hours next week

• Tuesday, Dec 15 from 6 to 7:30pm
• Thursday, Dec 17 from 6 to 7:30pm

Details

• Zoom link is available on Canvas
• No appointments, just drop in and we'll do a breakout room to chat
• If you can't make these times, please email me and we'll find a time to discuss

Thank you for a great semester!!