Visualising COVID-19 country-wise data using Python and Dash

Creating a Dashboard Web App for COVID-19 cases data

Let’s start by creating a folder which’ll hold all the components needed to create this web app. From creating a virtual environment, .gitignore file to the final app.py file, everything will be stored in this dedicated directory.

This is how our dashboard will look like:

So, Let’s Begin

The first step of using Python language comes with “Downloading & Importing Libraries” 😃. Since, we are using libraries like Plotly and Dash, we need to ensure that these libraries are present in our virtual environment. All the libraries that were required during the creation of this Web App have been listed in requirements.txt file present in Github repository (link shared at the end). The steps to create a dedicated app directory and a virtual environment are:

cd <initial-folder> # The folder selected initially

mkdir dash_app_example # Creating a dedicated app directory.

cd dash_app_example #moving to the dedicated app directory.

virtualenv venv # Create the virtual environment ‘venv’.

venv\Scripts\activate #Activates the virtual environment on Windows

pip install <package-name> #Helps in installing packages

After making sure all the packages are installed, let us move to Jupyter Notebook and create a new notebook in the dedicated folder. I’m working on Jupyter notebook but you can work on any other text editor as well, be it Atom, VS Code or anything that works for you. But make sure that your file name is app.py

Importing Various Packages

Dataset Used

The data repository for the 2019 Novel Coronavirus Visual Dashboard is operated by the Johns Hopkins University Center for Systems Science and Engineering (JHU CSSE). Also, Supported by ESRI Living Atlas Team and the Johns Hopkins University Applied Physics Lab (JHU APL).

Three different URLs were used for checking the cases: Confirmed, Recovered and Dead, which were all in csv format.

Confirmed cases Dataset

Recovered Cases Dataset

Data Cleaning

• Cleaning of data was performed country-wise in time-series format for country selected
• Overall case count for confirmed, recovered and dead cases was calculated by using a blocks of code.
• In this stage values for COVID-19 Case count were also evaluated.

Generating the line graph

After performing country and case wise data cleaning on the dataset provided. The User Interface development phase began with the first-and-foremost step of creating a line graph that would represent everyday data of COVID-19 Patients. The following code block represents both country-wise data processing and creation of a line graph

def fig_world_trend(cntry='US',window=3):
    df = process_data(data=covid_conf_ts,cntry=cntry,window=window)
    df.head(10)
    if window==1:
        yaxis_title = "Daily Cases" 
    else:
        yaxis_title = "Daily Cases ({}-days MA)".format(window)
    fig = px.line(df, y='Total', x=df.index, title='Daily confirmed cases trend for {}'.format(cntry),height=600,color_discrete_sequence =['indigo'])
    fig.update_layout(title_x=0.5,plot_bgcolor='#cfd7fa',paper_bgcolor='#ffffff',xaxis_title="Date",yaxis_title=yaxis_title)
    return fig

Dash Application

Most of the work in Dash is conceptually based on fundamental principles of Web Development. Basic understanding about HTML5, CSS and Javascript comes in handy while creating the UI. To create a secure dashboard, username and password pairs were generated, followed by creation of a dropdown list for every unique country.

def get_country_list():
    return covid_conf_ts['Country/Region'].unique()

def create_dropdown_list(cntry_list):
    dropdown_list = []
    for cntry in sorted(cntry_list):
        tmp_dict = {'label':cntry,'value':cntry}
        dropdown_list.append(tmp_dict)
    return dropdown_list

def get_country_dropdown(id):
    return html.Div([html.Label('Select Country'),
                        dcc.Dropdown(id='my-id'+str(id),
                            options=create_dropdown_list(get_country_list()),
                            value='US'
                        ),
                        html.Div(id='my-div'+str(id))
                    ])

Furthermore, features like Graph Container for Dash, Moving Window Slider were added before generating App Layout and assigning dash callbacks.

To run the Application on local host, the following command needs to be executed as it will share the Dash URL where the web application is deployed in the production environment.

app.run_server(host= '0.0.0.0',debug=False)

An Overview of the Application

The above You Tube video will give an overview of the application and its features. For instant access to code, link to my Github profile has also been shared.

Source Code

The repository is made available on Github at the following link:

COVID19/app1.ipynb at main · guneet-coder/COVID19

For any queries, kindly report in the issues section of my Github profile. Hope this helped you!