If you are reading this article, I am sure that we share similar interests and are/will be in similar industries. So let’s connect via Linkedin! Please do not hesitate to send a contact request! Orhan G. Yalçın — Linkedin
Also, many questions led us to create an Instagram Page for coronavirus updates. You can follow us for daily updates: OUTBREAKSTATS
Coronavirus (COVID-19) outbreak has affected everyone’s life one way or another. The number of confirmed cases is around 100,000 and the total number of deaths is over 3,000. The number of countries with confirmed cases is almost 70. On the other hand, more than the virus, the fear is even more disastrous. The cost of the outbreak has reached trillions of dollars and economists are talking about a global recession. This is certainly not a good start for 2020.
Corona Outbreak in Northern Italy
So, we see the effect of the coronavirus everywhere from China to the U.S., from Norway to Australia. Statistically though, if you live in certain countries, you are more at risk and unfortunately, I have been experiencing it more severely since the city that I live in –Bologna– is located in Northern Italy, where the outbreak is the most fierce in Europe. Unfortunately, the total confirmed cases in Italy has already surpassed 2000.
As a person who had to isolate himself from the public, I had some free time and believe me, I used most of this time searching for the latest developments regarding the coronavirus outbreak. This dire situation gave me the idea of making the best out of the worst situation.
The Difficulty of Finding Up-to-date Coronavirus Outbreak Data
Searching for the coronavirus outbreak stats is a cumbersome work since every time I had to visit multiple sources to see what is happening. After some intense research, I found out that the Center for Systems Science and Engineering at Johns Hopkins University publishes the outbreak data with daily updates. However, the .csv format makes it challenging to derive meaningful insight every time. That’s why we have the discipline of Data Visualization.
Data Visualization with Plotly and Dash
One of the other things I have done during my self-isolation period was to excel in my knowledge on Plotly and Dash.
Plotly is an interactive Python data visualization library. You may use your iPython to generate beautiful interactive graphs in a matter of seconds. It is excellent to extract insights from CSV files. One may say that Plotly is a fancy Matplotlib. One downside of using Plotly, as opposed to pure Javascript data visualization libraries, is not being able to share it with others since it uses Python, a backend language (p.s. You may learn more about Javascript data visualization libraries with this article).
When I was thinking that I cannot be the only one seeing this disadvantage, I found out about Dash. Plotly, the Company behind these libraries, explain Dash as follows:
“The Dash platform empowers Data Science teams to focus on the data and models while producing and sharing enterprise-ready analytic apps that sit on top of Python and R models. What would typically require a team of backend developers, frontend developers, and IT can all be done with Dash.” [Plotly]
I could not agree more with this statement. Thanks to Dash, you don’t have an in-depth knowledge either in the backend or the frontend. To build and publish a dashboard, knowledge on Dash and Plotly is enough.
Over-Qualifying Myself for the Task
On the other hand, in the last three months. I completed three Udemy courses:
- Python and Flask Bootcamp: Create Websites using Flask! by Jose Portilla
- React — The Complete Guide (incl Hooks, React Router, Redux) by Maximilian Schwarzmüller
- Interactive Python Dashboards with Plotly and Dash by Jose Portilla
Funnily enough, Dash is built on top of Flask as backend, ReactJS as frontend, and uses Plotly as data visualizing tool. Even though I did not have to know React and Flask, it came handy at times when I try to figure out the logic behind Dash. Consequently, I thought as a person stuck in a virus outbreak and with new technical knowledge, why not create a Dashboard about my daily life these days by using the technical knowledge I recently obtained? The dashboard idea was the only ‘making the best out of the worst situation’ scenario for me. Therefore, I built and published the OutbreakStats dashboard with the help of the following sources:
The Sources I Used for the Dashboard
Database
- CSSE COVID-19 Dataset (with daily updates)
News Updates
Choropleth Map
- Map Box (you may use the Mapbox maps inside Plotly and Dash)
Technical Knowledge:
- Interactive Python Dashboards with Plotly and Dash by Jose Portilla
Server
- Heroku (free upgrade with Github student pack)
- Dash Deployment Guide
Theme
IDE
- For Plotly insight discovery: Jupyter Notebook
- For Dash app: Visual Studio Code
My Thoughts on Plotly and Dash
I worked with Plotly before and did some freelance work on Upwork and Fiverr platforms. My clients loved the results as compared to Matplotlib and Seaborn since Plotly also provided interactivity. Being capable of publishing the work that I have done with Plotly library was the main motivation for me to learn Dash.
My experience with Dash, so far, is as follows:
Dash heavily relies on Flask and it almost works as a Flask app. It is inevitable to notice the similarities between Dash and Flask. In a Dash app, there are two component types to build a dashboard: Core Components and HTML Components.
Core Components
‘Dash ships with supercharged components for interactive user interfaces. A core set of components, written and maintained by the Dash team, is available in the dash-core-components library.’ [Dash Documentation]
With core components, you can create (i) Plotly graphs and (ii)React components such as Dropdown, Slider, Input. Core components are like relatively complex React components that you may find in Semantic-UI-React or Material-UI. The difference is that you use Python to add these components to your dashboard. No need for frontend skills 🥳.
HTML Components
‘Dash is a web application framework that provides pure Python abstraction around HTML, CSS, and JavaScript.’ [Dash Documentation]
These components render basic HTML tags such as <p>,<Div>,<img>. Once more, the difference is that you use Python to add these components. Therefore, you don’t even have to know HTML to build a Dash app. No need for markup language skills🎉🍾.
Other Observations
To add custom javascript, CSS, image files, all you have to do is to create a folder (must be named as assets) and store all the files under this folder. They just work without any import or config setting since Dash is already configurated in this way.
Final Thoughts
Dash is a Flask app that is purposefully customized for Dashboard creation. Therefore, you don’t have to think about every little detail as they are already configurated by the Dash team. As long as you stick to the documentation to create your dashboard, the development process is very easy and fast. However, if you would like to customize the app and add new features to make it more than a dashboard, there may be shortcomings.
Conclusion
I hope you enjoy this blog post. In my previous articles, I usually shared my source code as they were more of a tutorial than a blog post. In this article, I try to show you a way of building a Dashboard and serve to the public. You can visit the one I created for Coronavirus Outbreak Data at OutbreakStats and here is a preview:
So, generating the dashboard code is up to your imagination. If you carefully follow The Sources I Used for the Dashboard section of this post, you may easily build your own dashboard even within a day.
Recent Comments