Intro
Obviously with the global pandemic ongoing, a very serious issue, I have been looking at various sources of information for daily cases, etc. especially WorldOMeters.Info – Coronavirus , Johns Hopkins Coronavirus Resource Center, and the New York Times Coronavirus Map.
While these existing dashboards are great, I wanted to learn how to put together my own as a learning exercise. This was a good opportunity to exercise my Python skill using Plotly-Dash using the widely available Covid-19 data that’s available on the internet (I chose the New York Times GitHub data source as my starting point, which is updated daily).
You can access the embedded dashboard below, or you can view the full screen one directly from Heroku: https://covid-dash-sciencey.herokuapp.com/. The code is available at my GitHub zacharygibbs/covid-dash-sciencey. I will include a write-up below on how I went about learning how to build this dashboard and where you can find the code.
The Dashboard
Building this dashboard and deploying to GitHub/Heroku was straightforward after following some online Examples and the Dash Documentation.
If I was starting again from scratch, I would have liked to have found the following all in one place without quite so much googling –
Multiple Columns
This Post on the Plotly Community docs lays out how to arrange your dash app to have multiple columns. It all starts by linking an external stylesheet
(external_stylesheets = [‘https://codepen.io/chriddyp/pen/dZVMbK.css 72’])
Then using the class name and defining as rows or columns nested to suit your needs.
html.Div(className='row', children=[
html.Div(className='six columns', children=[....])
... (repeat as needed)
])
Apparently the ‘six columns’ can be adjusted to suit your desired width (apparently, each page is divided into 12 columns), meaning that ‘six columns’ is what you would use to divide into halves. For my covid-dash-sciencey app, i did a ‘three columns’ and ‘nine columns’ setup to get 1/4 width column for menus and 3/4 width column for charts.
Filter Data Based on User Input
Ultimately, the goal of my simple app was to display the data while allowing for the user to filter based on state/county and to toggle between cases/deaths and linear/log scale. This is something that I had found difficult on other dashboards (either was not done consistently, or was difficult to navigate). I was able to find a great example of filtering based on control dropdowns and radio buttons on the Plotly Community page.
The interactive portion of Dash comes in the Dash-Callbacks. This example allowed me to understand the Input and Output arrangement of the callbacks and how to very easily pass them between objects within the app.
Deployment to Heroku
After tinkering around on my localhost (127.0.0.1) for a while, and eventually deploying within my wireless network (0.0.0.0.0), I was ready to deploy the app more widely. Several great examples explain how to set up your application for deployment to Heroku: (Plotly Docs, TowardsDataScience example, this article). Being a Linux noob, I referred to these articles extensively to set up my virtual environment, install all of the requirements, and eventually deploy to heroku local. It’s amazing how powerful and simple these scripts are (when they work), but sometimes it’s just getting everything set up that takes a while.
Bonus – Raspberry PI 4 Setting Up Dash on Python 3.6
I had recently purchased a Raspberry PI 4 B from Adafruit. This latest version was a step change improvement over my PI Model B that I originally bought in 2013.
In order to get Dash up and running on the Pi’s arm7l processor, I had to install
Raspberry pi BerryConda https://github.com/jjhelmus/berryconda
Conclusion
Great learning experience! I hope to build more apps in the future.