Build a COVID-19 Map with Python and Plotly Dash

The novel coronavirus (COVID-19) pandemic situation continues to evolve worldwide. Thanks to Johns Hopkins CSSE, we now have access to these data and we can use it to build analysis and dashboards. We will use the daily reports data.

In this tutorial, we will build a simple visualization to display the impact of COVID-19 in each country as shown below. We will use Python and Plotly Dash. Dash is a Python framework that makes it simple to build interactive data visualization web apps.

The final code can be found here: https://github.com/megahf/covid19-dash/blob/master/choropleth.py

COVID-19 map that we will build

Prerequisites

You need to have Python 3 and pip installed. You can check by running:

python -V
pip -V

Setup Dash

First, let’s install Dash.

pip install dash==1.11.0

Then we create a new Python file, I will call mine hello_dash.py. We import the Python libraries that we will use. Now, let’s do a simple ‘Hello World’ code to test that your environment has been set up correctly. You can start the app with the command:

python hello_dash.py

Navigate on your browser to http://127.0.0.1:8050/ and you should see a simple page with “Hello World” on it.

In the code, we initialize a Dash app. Then, the layout is a tree structure of HTML elements. In our example, it’s equivalent to the following HTML code:

<div>
<h1>Hello World</h1>
</div>

Setup COVID-19 Python File

Let’s create a new Python file for the COVID-19 visualization, I call mine choropleth.py. We import the required Python packages and we also create placeholders for functions that will be developed in next sections.

prepare_daily_report() will be our data preparation function. app.layout will define the HTML page of our Dash app, while update_figure() will update the graph as user select different values on the dropdown.

Prepare Data

The Johns Hopkins data provides daily information on number recovered, infected, and dead, and active by regions of a country. We use current date minus one to find the latest CSV file. As we want to plot it by the country, we aggregate the sum for each country. I replaced ‘US’ with ‘United States’ to make it work for the merge step later. We also replace 0 with 1 as we will apply log function on the values later.

Snippet of df_country

The Plotly library requires countries to be labelled by its country alpha code. The Johns Hopkins data, on the other hand, simply uses the country name. I use the GDP dataset from Plotly to obtain the list of alpha code and merge it with the aggregated dataset. I also had to update the values for Congo-Kinshasa and Congo-Brazzaville manually.

Snippet of df_country_code

Update Dash Layout

Let’s prepare the HTML layout of our page. In the Hello World example, we only had one HTML element (H1) in the main div element. Now, we have 3 div elements. The first one contains the H1 element to put our title “COVID19 Impact by Country”. The second one contains the dropdown where users can choose the metric: Confirmed, Recovered, Deaths, or Active. The ID of this dropdown is value-selected. The last div will contain a graph with id my-graph.

Build Graph

First, we want our graph to be updated as users interact with the dropdown. We use the @app.callback declaration to achieve this by specifying that the output of update_figure() method is the figure element of my-graph and that the input is the value of the dropdown.

The argument for update_figure() can be one of the 4 values: Recovered, Deaths, Confirmed, or Active. We will call the prepare_daily_report() function we created earlier. Then, we create a new column ‘hover_text’ which combines the name of the country and the value for the selected metric. This will be used to show information when users hover on each country.

Hover text information

To build the map, we use the choropleth function. We use the alpha code column (‘CODE’) for locations. For the colour of the region (z), we use the log of the selected metric. As some countries have significantly high value compared to others, the colour difference will not visible if we use the actual number. By applying log, we scale down these extreme values. Our map will be more informative as more range of colours are displayed.

Left picture shows map with log function applied. Right picture shows map with actual values.

Run the App

The final code would look like this.

Once it’s setup, simply run the code as Python file. For example, if my Python file is called choropleth.py, the command would be:

python choropleth.py

Navigate on your browser to http://127.0.0.1:8050/ and you should see your map. Congratulations!