Getting Started with Plotly Dash

Description

Dash is a Python framework for building analytical web applications. Dash ties modern UI elements like dropdowns, sliders, and graphs to your Python code. In this class, participants will learn how to build a simple Dash application and deploy it online.

How to deploy a simple Plotly Dash app on Heroku

• Take a moment to read this Medium post about how to deploying this app

Notes

• The assets folder is designed to hold all of your static images. Then you can call them using the get_asset_url method, as follows:

html.Img(src=app.get_asset_url(some_image.jpg)),

• There's a file called favicon.ico -- you can find and download customized favicons here. Just replace the current favicon with a new one.
• The requirements.txt includes the basic libraries you'll need to run a simple Dash app, but for more complicated projects you may need to add additional libraries such as dash-daq or scikit-learn.
• Be sure to include the files runtime.txt and Procfile
• You should only have one app per repository, and you should name it app.py for deployment on Heroku. This name is referenced in Procfile and also inside of app.py itself.

Additional Reading

• Plotly’s Dash deployment guide
• Heroku’s deployment guide
• Fantastic blog post that dives deep
• Excellent YouTube tutorial

Simple dash apps to fork and imitate

This page presents a collection of very simple dash apps, designed for learning purposes. Each has an embedded link to its source code on github. Students can fork the code on github, modify the app.py file, and deploy their own version on Heroku.

• Here's a Medium post describing how to do that.

Simple (no callbacks, no pandas)

• https://zoo-animals-dash.herokuapp.com/
• https://flying-dog.herokuapp.com/
• https://example-donut-chart.herokuapp.com/
• https://dash-linechart-example.herokuapp.com/
• https://back2good-dc-metro.herokuapp.com/

Dash apps with simple callbacks

• https://dash-simple-callback.herokuapp.com
• https://chuck-norris-execution.herokuapp.com/
• https://dash-radio-callback.herokuapp.com/

More advanced callbacks

• https://lightsaber-chooser.herokuapp.com/
• https://dash-multitab-example.herokuapp.com/
• https://dash-daq-state.herokuapp.com/

Dash apps with Pandas

• https://virginia-2016-vote-totals.herokuapp.com/
• https://scatterplot-dc-housing.herokuapp.com
• https://data-table-beer-example.herokuapp.com/
• https://my-test-pandas-app-123.herokuapp.com/

Dash apps with maps

• https://dc-properties-map.herokuapp.com/
• https://virginia-census-data.herokuapp.com/
• https://dash-density-heatmap-dc.herokuapp.com/
• https://agriculture-exports-map.herokuapp.com/
• https://va-opioid-dashboard.herokuapp.com/
• https://dash-density-heatmap.herokuapp.com/

Dash apps for machine learning models

• https://knn-iris-classifier.herokuapp.com/
• https://tmdb-rf-genres.herokuapp.com/
• https://ames-housing-linear-reg.herokuapp.com/
• https://loan-approval-classifier.herokuapp.com/

Official Resources from Plotly:

Introducing Plotly Dash
Youtube: Dash in 5 minutes
Dash User Guide
Dash Workshop, Washington DC Edition - June 9-10, 2018
Chris Parmer's github repo for Dash
Dash Community Forum - like StackOverflow for Dash
Gallery of Dash apps

Additional resources for learning Dash

Dash Workbook by Jose Portilla
Github Repo by Jose Portilla
Using Dash to build public sector dashboards