Building a COVID -19 Dashboard using Dash

Final Look after completing the Project :-

Description About the Project :-

In this Project we are Going to Build a Dashboard on which we are going to Show the Situation of India in this Corona Phase with the help of Graphs ,So that we can easily Visualise the current Status in different State of India and also Visualise the number of patients in different status.

What we Need to know for this Project:-

First we are Going to make a Dashboard in which we shows So many Analysis on the COVID_19 with the help of Dataset .For making this we need Some Basic Knowledge about the website Development and Some Basic Knowledge about the Data Analysis .So we are going to make this Project with the help of Dash which is a python framework for building web application.It built on top of Flask, Plotly.js , React and React Js .It is not possible to build a Dashboard using pure Python.

Tool Needs to make this Project:-

1. We are going to do this Project on PyCharm .So Install PyCharm.
2. For Analysis part you need Dataset of COVID-19 , So download the dataset from Kaggle , which is a csv file means comma-separated values Here is the Link:-

COVID-19 in India

Now we have Both PyCharm and Dataset , So we Should start our Project:-

First you go to Desktop and make a directory with the name COVID-19 and move your csv file means dataset inside that COVID_19 directory and then open that directory inside the PayCharm. Now make a python file inside the COVID-19 directory with the name app .Now open that that app python file .

Now for making Dashboard first we install all the packages through terminal inside the PayCharm , which we are going to use in this Project:-
Install pandas , Here is the command pip install pandas
Install plotly , Here is the command pip install plotly
Install dash , Here is the command pip install dash

After this we import all these inside the app python file

import pandas as pd
import plotly.graph_objs as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

Now for making attractive website we are going to use Bootstrap which is a free and open source CSS framework. For using Bootstrap in the Dash project we have a certain rule to use .First we make a empty list and inside that list we give all the description about the External Stylesheet in a curly bracket.

external_stylesheet= [
    {
        'href': 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css',
        'rel': 'stylesheet',
        'integrity': 'sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh',
        'crossorigin': 'anonymous'
    }
]

Now we read that csv file inside the app file:-

data1=pd.read_csv(‘IndividualDetails4.csv’)

In Dash first we do two thing inside the app file that is :-
1. Now make a variable app which will be equal to (__name__) of dash class.
syntax:- app=dash.Dash(__name__,external_stylesheets=external_stylesheet)

2. Make a layout with the help of app
app.layout=html.Div([ ],className=’container-fluid’)
Inside this Div we are going to write our html code.

After this Do Some Analysis on this data :-

First thing we see inside the data that how many number of column and number of row by data.shape and then check the column name and data inside all the column .

First we Analysis that how many number of candidates is in different Status like Hospitalise ,Recovered , and Death , this is very simple just look your dataset there is a column name “current status” in which they mention the current status of all the patients and in that column there is a categorical data which is Hospitalise ,Recovered , and Death .if we want to find the number of patient having different status . we know there is a method value_counts() which give the number of counts of different categorical data.So if we do this :- mask=data[‘current status’].value_counts() it’s give output like this:-
Hospitalized 5212
Recovered 116
Deceased 26
Migrated 1
Name: current_status, dtype: int64

Then mask[0] give the number of candidates who is Hospitalised,
mask[1] give the number of candidate who is Recovered,
mask[2] give the number of candidate who is Deceased or death.

For Building this project dash is divided into two part first dash_core_component as dcc and second is dash_html_component as html .So we want to show this Analysis on the webpage. So we need to code in the layout section of this app.

In this code we take a “container-fluid” class of Bootstrap which take the entire screen side inside that Div we take another div of class “row” inside the row we take another div of class “col-md-3” after that we take another div of class “ row” inside the class col-md-3 and finally we take 4 div of class “col-md-12” inside the class row and in each div of col-md-12 we take a card and inside the card we display the content .

@ all these classes {col-md-3 ,col-md-12, card ,row } are Bootstrap classes.

if we want to show this Analysis on the dashboard in the pie-chart in which user input the name of the state and we are going to show the status of that particular state.In this pie-chart we need we need two things first dropdown and second pie-chart so inside the div we use dash_core_component as dcc
which help in building the dropdown and Graph.

dcc.Dropdown(id='pie', options=pie_option, value='All'),
dcc.Graph(id='pie1')

In id =’pie’ we take input from this id=’pie’ and option =pie_option here pie option is a list of all the option which you want to show in the dropdown.So we make a list of option:-

pie_option=[
    {'label':'All','value':'All'},
    {'label':'Maharashtra','value':'Maharashtra'},
    {'label':'Delhi','value':'Delhi'},
    {'label':'Kerala','value':'Kerala'},
    {'label':'Telangana','value':'Telangana'},
    {'label':'Punjab','value':'Punjab'},
    {'label': 'Haryana', 'value': 'Haryana'},
    {'label': 'West Bengal ', 'value': 'West Bengal'},
    {'label': 'Rajasthan', 'value': 'Rajasthan'},
    {'label': 'Tamil Nadu', 'value': 'Tamil Nadu'},
    {'label': 'Uttar Pradesh', 'value': 'Uttar Pradesh'}
]

and then we use a @callback function to receive the input from dropdown and according to the input display the output graph whose id is ‘pie1’.

@app.callback(Output('pie1','figure'), [Input('pie','value')])
def update_graph(type2):
    if type2=='All':
        p_mask =data1['current_status'].value_counts().reset_index()
        val1 = p_mask['current_status'][0]
        val2 = p_mask['current_status'][1]
        val3 = p_mask['current_status'][2]

        labels = ['Hospitalized', 'Recovered', 'Deceased']
        values = [val1, val2, val3]
        figure=go.Figure(data=[go.Pie(labels=labels,values=values)])
        return figure
    else:
        mask = data1[data1['detected_state'] == type2]
        p_mask = mask['current_status'].value_counts().reset_index()
        val1 = p_mask['current_status'][0]
        val2 = p_mask['current_status'][1]
        val3 = p_mask['current_status'][2]
        values = [val1, val2, val3]
        labels = ['Hospitalized', 'Recovered', 'Deceased']
        figure= go.Figure(data[go.Pie(labels=labels,values=values)])
        return figure

From dropdown we receive what user input and with the help of id give the output graph .If user input All we use value_count() on total data which gives us no. of candidate Hospitalised,Recover and Death in India , but if we give input Delhi then my data first check that the detected_state==’Delhi’ ,here detected state is another column in which there is a data of a candidate which show from which state that particular candidate belong.
mask = data1[data1[‘detected_state’] == type2]
At this time a new data_frame is ready in which there is a data of candidates who is belongs from Delhi then we did same thing use value_counts() to find the number of candidate in different status that is Hospitalise,Recover ,Death and then we send that value to the go.figure() which help us to make a graph on the basis of the given data.

Now if you want to display a static graph according to the dataset in which on x-axis you want to display the state name and on y-axis we want to show the number cases in different state of India , for this static graph representation we need to analysis first

So as we know there is a column “detected_state” and we know all the row there is a data about one candidate . So if we use value_count() on the “detected_state” column it gives us the number of cases in different state.
d_state=data1[‘detected_state’].value_counts().reset_index()
“.reset_index” helps us to change that series into the data_Frame.
Now in d_state data_Frame we have two column first is “index” in which we have name of all the state and second is “detected_state” in which we have number of cases in different state.Now we are going to pass this information to the graph where x-axis =d_state[‘index’] and y_axis=d_state[‘detected_state’].

Here layout you can make using the html concept.In row class of bootstrap we have 12 number of column and we use 3 of them in the first 4 div in which we display 4 card of Total number Cases,Hospitalised case,Recover case, Death Case.So the rest 9 column is also divided into two part and in one part we display this Graph and In another half we are going to display to pie-chart graph.

If you have any Confusion in Layout portion you can visit my github Repo to see my project File.

143jshubham/covid-19

Conclusion:-

In this Project we understand how we integrate the Data Analysis with the website Development .Integrating the things with others is a great work Experience.Only Analysis of Data is good but if we are going to make a website with that Analysis which is user friendly and easy to Understand that what is happening inside the Analysis , that is the Best way to Show your Analysis.