Housekeeping¶

Extension for HW #7 (including final project proposal) — due by the end of the weekend
- A few students have needed short extensions — let me know if you need an extra day or two
- Feedback via email on project proposals in the next ~week or so
Our last class will be a synchronous Zoom lecture Tuesday next week — morning office hours but no evening office hours
Office hours the week of Dec 14 TBD
Final project due: 5pm on Monday, December 21st

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

Last two classes!¶

Interactive dashboards with the Holoviz ecosystem
Combine all the tools: Altair, Hvplot, Holoviews, GeoViews, Datashader, Folium
We'll walk through two example dashboards
Review final project and dashboarding options

Last week¶

Example: Github Pages
Introduction to web servers
Dashboards with Dash

Recap: Two key elements of Dash apps¶

You must define the "app.layout" — this is your HTML layout
You must define your callback functions and the input/output that they take.
- You mark certain functions as callbacks so Dash knows they interact with your HTML code.

More information: Dash user guide¶

https://dash.plot.ly/getting-started
Very good series of chapters illustrating different aspects of Dash
Relies on Plotly visualizations but idea is the same for IFrame elements

Let's re-visit our shootings app in Dash from last week¶

From the Jupyter Terminal or the Terminal/Anaconda Prompt apps:

cd dash-altair
python dash_altair_shootings.py

Dash app

Note for Windows users¶

You will likely need to navigate to localhost:5000 instead of http://0.0.0.0:5000

Note: the web address http://0.0.0.0 is an alias for "localhost" — this means the web server is running locally on your computer.

Exercise: modifying your Dash shootings apps¶

Let's modify the Altair-based Dash app for the shootings data in Philadelphia to include a dropdown that allows the user to specify which race to show data for.

Steps

First, take a look at the documentation for the Dropdown object in Dash's core component library: https://dash.plot.ly/dash-core-components/dropdown
Modify the layout of the app to include a new Div element that contains the Dropdown element
Modify your render() function to accept the value of the race dropdown as an input to the function — then, you can use that value to select the appropriate subset of your data frame to plot!

Solution¶

See this Dash app, which adds a dropdown element for race of the shooting victim.

One more Dash example: Dash + Folium¶

Since Folium plots can be converted to HTML, they can be displayed in Dash apps as HTML IFrame elements
We can use Dash widgets to control what gets displayed on the map

Dash app

From the Jupyter Terminal or the Termina/Anaconda Prompt apps:

cd dash-folium
python app.py

to start the example

Deploying a Dash app¶

By default, Dash apps run on "localhost" - you can only access them on your own machine.
To share a Dash app, you need to "deploy" your Dash app to a server
Plotly has an "enterprise" (commercial) solution for this but it costs $$$

Launching your app on Heroku¶

The Dash docs contain a complete example of launching a simple Dash app to Heroku
See the "Heroku Example" section of https://dash.plot.ly/deployment
Make sure you've signed up for an account and downloaded the CLI first! (see the previous slide)

Summary: web-based visualizations so far¶

Github Pages via MUSA-550-Fall-2020/github-pages-starter
- Supports: Folium, Altair, Hvplot/Holoviews, HTML files via IFrames
- User cannot use the interactive features of the charts, but cannot change the content dynamically
Flask/Dash
- Supports: Folium, Altair, Hvplot/Holoviews, HTML files via IFrames
- Allows for more complex user interactions via a set of dynamic widgets

Right now: Panel

Example gallery: https://panel.pyviz.org/gallery/index.html
Other demos from a Panel developer: https://jsignell.github.io/

The downside of these options¶

Github Pages is static — only user interaction comes from what is built in to the chart
Flask/Dash has server support, but IFrame based visualizations still can't talk to each other

Goal: a Python-based solution with server support where visualizations from different libraries can interact with each other

Saving the best for last: Panel¶

A high-level dashboarding solution in Python¶

Relatively new, but the most promising dashboard library so far
Supports nearly all plotting libraries
Works just as well in a Jupyter notebook as on a standalone secure web server
Large set of interactive widgets

Very general too...¶

Multi-page layouts via tabs See this page
Can include custom CSS / Javascript as well

Crucial feature: supports live dashboarding code in a Jupyter notebook and deploying same code to a server

Only library to support entire data wrangling workflow in a Jupyter notebook

Built on top of the HoloViz ecosystem¶

Also important: Panel provides only support for Datashader and visualizing large datasets

Today's Plan¶

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

Recommended Viewing¶

PyData talk in Dec 2019 from the creator of Panel:

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

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