Responsive Covid – 19 dashboard in python by plotly dash

Responsive Covid - 19 dashboard in python by plotly dash
Responsive Covid - 19 dashboard in python by plotly dash

Create responsive Covid – 19 dashboard in python by plotly dash using plotly data visualization library and dash web library.

This responsive Covid – 19 dashboard in python by plotly dash is fully responsive and can be viewed on any device. Because url of the data link is connected to this app. So when data updated in the data source, the data in this app automatically updated. I have created two CSS files for this app to make it responsive on any device. There are four rows and columns in this python dashboard. As a result, I have displayed four cards in the second row. Each card displays global cases and data on these cards automatically updated when data is updated in the main data source.

In the third row of responsive Covid – 19 dashboard in python by plotly dash, there are three grids. In the first grid, there is a drop down list and indicators. Indicators display daily new cases for each country and donut chart shows total cases for each country. Combination of line and bar chart displays last 30 days daily confirmed cases and rolling average of the last seven days values. In the fourth row, I have inserted scattermapbox map chart. I have created hover effect on this chart and hover info shows information for each country. See below how this dashboard work?

Let’s start to create this responsive Covid – 19 dashboard in python by plotly dash. Follow the steps below. First create assets folder in your code editor and inside this folder create new file with .css extension. Copy the below code and paste in your .css file. You can also get below CSS file from plotly website dash docs page. This file special created for dash web apps to make charts responsive on any device. So I have added some code in this file to make it more responsive.

Then follow the second CSS file. I have created this file to style classes. Create new .css extension file in the assets folder and copy the below code and paste in that file. This file help us to adjust the position of elements in rows and columns to make this Covid – 19 dashboard in python by plotly dash responsive.

Cards

There are four cards in this responsive Covid – 19 dashboard in python by plotly dash. Each card displays data for global cases. Data on these cards updated when it is updated in the data source. I have used P html component to extract data from the data source using the specific column. I have specified number format type in the string. It can be viewed below in the lines 8 and 15. Below code is for Global Cases card. I have used same code for other three cards and just changed the columns name in the data frame. I have used card_container class to format these cards in the CSS file.

Indicators

Below the drop down list, there are four key performance indicators in this responsive Covid – 19 dashboard in python by plotly dash. These indicators display new cases for each country. Create specific data frame for these indicators to get new values from the data source. This data frame can be viewed in lines 5 to 8. There are many parameters for indicators. I have used many of these. Select number and delta in mode parameter and use data frames for number and delta to get values in the indicators.

Donut Chart

Donut chart displays total cases values for each country in this responsive Covid – 19 dashboard in python by plotly dash. First of all create specific data frame for this type of chart. Then this data frame connect to the drop down list to make it dynamic and use hole parameter to create hole in this chart. You can see in the line 20 below in the code template.

Combination of Line and Bar Chart

Combination of line and bar chart displays last 30 days daily confirmed cases and rolling average of the last 7 days. I have created two new columns in the data frame. It can be viewed in lines 9 to 10. I have created new column named daily confirmed using pandas shift function to get daily values in the data frame and I have also used rolling function to get average of the last 7 days for daily confirmed cases. Create separate data for bar and line chart in the data section using plotly parameters of the line and bar chart. Adjust the position of legends at the bottom of x-axis.

Scattermapbox Chart

Scattermapbox chart displays total values for each country on its geographic location on the map. Hover info is created to get information for each country. This map is not connected to the drop down list and it works as output. But data on this map chart is updated when that data is updated in the data source. I have created bubble size using the confirmed column values from the data frame and divided by each value to 1500. The size of each bubble depends on the values of confirmed column. I also have used confirm column for the color of each bubble. Other properties of this map chart can be viewed below in the code template.

Download the full code and learn more about plotly dash on Udemy.


If you have any problem in learning above code, please comment in the comment box. I will help you as soon as possible.


Recommended For You

About the Author: Mubeen Ali

I am passionate about learning Dash. Dash is a python framework that creates beautiful web based data visualization dashboards.

2 Comments to “Responsive Covid – 19 dashboard in python by plotly dash”

  1. Hi Sir Mr Mubeen Ali.
    If i want to download the source code of dasboard, i don’t see anything.
    Please help me to get the source code and try this exercise.
    Thank you

Comments are closed.