How to Create a Simple Dashboard With Plotly
By: Eduardo Sarmento
Tags: Covid 19, Data Science, Plotly, Programming, Python

Photo by Negative Space from Pexels

Introduction

In order to have a better visualization of your data, you may want to gather everything in one place, creating a dashboard. Plotly Express is a tool that will let you to create awesome interactive graphs easily and, with Plotly Dash, you can use them to compose a dashboard.

In this article, I’ll show you how to create two graphs and put them together in a simple dashboard. We’ll be using COVID-19 data around the world as an example.

Method

The first graph we’ll create is a scatter plot on a world map showing the evolution of cases through the weeks of 2020. The data on COVID-19 worldwide is from Our World in Data COVID-19 dataset. We’ll also need coordinates of each country, which I got from this dataset on Kaggle.

import pandas as pd

import plotly.express as px covid = pd.read_csv('full_data.csv')

covid = covid[['date', 'location', 'total_cases', 'total_deaths']] countries_geo = pd.read_csv('countries.csv')

countries_geo = countries_geo[['latitude', 'longitude', 'name']]

countries_geo.columns = ['latitude', 'longitude', 'location']

Now that we imported both datasets, let’s merge them. After merging, I also converted the date column to datetime format and filled null values with 0.

countries = pd.merge(covid, countries_geo, how='inner', on='location') countries['date'] = pd.to_datetime(countries['date'])

countries = countries[countries.date.dt.year == 2020].copy()

countries.fillna(0, inplace=True)

The last preparation we need to do with our data is to organize them by week. I achieved this by selecting only the rows with data from Sundays and then created a new column with the corresponding week number using the isocalendar method.

countries_week = countries[countries.date.dt.weekday == 6].copy()

countries_week['week'] = countries_week['date'].dt.isocalendar()['week']

Now, we can create our first graph using the Plotly’s scatter_geo function.

fig_map = px.scatter_geo(

countries_week,

lat = 'latitude',

lon = 'longitude',

size = 'total_cases',

hover_name = 'location',

hover_data = ["total_cases", "total_deaths"],

title = "COVID-19 Evolution in 2020",

animation_frame = "week",

color="total_cases",

labels={

'total_cases': 'Cases',

'total_deaths': 'Deaths',

'week': 'Week',

'latitude': 'Latitude',

'longitude': 'Longitude'

},

projection = 'natural earth'

) fig_map.show()

The result is a world map with points with size proportional to the total amount of cases in each country. The color also changes according to that number and you can see historical data using the slide at the bottom. If you hover over a point, it shows some extra infos.

The next graph we’ll create is a line plot showing the evolution of cases in the current 10 countries with highest amount of confirmed cases. For this, we need to know what countries are these. Therefore, we’ll select the rows of the last week, sort them by total_cases and extract only the first 10 as a list.

top10 = countries_week[countries_week.week == countries_week.week.max()].sort_values('total_cases', ascending=False).iloc[:10, 1].to_list()

Now, we can create the graph comparing COVID-19 evolution in these countries.

fig_line = px.line(

countries_week[countries_week.location.isin(top10)],

x="week",

y="total_cases",

log_y = False,

color='location',

hover_name = 'location',

hover_data = ["total_cases", "total_deaths"],

title = "COVID-19 Evolution in 2020 (Top 10 Countries)",

labels= {

'total_cases': 'Cases',

'total_deaths': 'Deaths',

'week': 'Week',

'latitude': 'Latitude',

'longitude': 'Longitude',

'location': 'Country'

}

) fig_line.show()

The result is a simple line plot, on which you can select lines to hide and zoom in sengments of the graph.

The last thing we’ll do is creating a dashboard web page with these two graphs using Plotly Dash and Ngrok. Plotly Dash is a framework for building machine learning anddata science web apps. Ngrok is a tool that gives us a public URL for our localhost (you’ll need this if you’re running your code using Google Colab like me).

First, we’ll need to install Plotly Dash on our Colab machine.

!pip install dash

!pip install dash-html-components

!pip install dash-core-components

!pip install dash-table

Now, we can import everything we’ll need.

import os.path

import sys, json

import requests

import subprocess import numpy as np

import pandas as pd

import plotly.express as px from requests.exceptions import RequestException

from requests.adapters import HTTPAdapter

from requests.packages.urllib3.util.retry import Retry from collections import namedtuple

You can define the following function to download Ngrok.



if not os.path.isfile('ngrok'):

!wget

!unzip -o ngrok-stable-linux-amd64.zip

pass def download_ngrok():if not os.path.isfile('ngrok'):!wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip !unzip -o ngrok-stable-linux-amd64.zippass

We’ll also use a function to set up Ngrok’s tunneling.

Response = namedtuple('Response', ['url', 'error']) def get_tunnel():

try:

Tunnel = subprocess.Popen(['./ngrok','http','8050'])

retry = Retry(connect=3, backoff_factor=0.5)

adapter = HTTPAdapter(max_retries=retry)

session.mount(' session = requests.Session()retry = Retry(connect=3, backoff_factor=0.5)adapter = HTTPAdapter(max_retries=retry)session.mount(' http://' , adapter)

res.raise_for_status() res = session.get(' http://localhost:4040/api/tunnels' res.raise_for_status() tunnel_str = res.text

tunnel_cfg = json.loads(tunnel_str)

tunnel_url = tunnel_cfg['tunnels'][0]['public_url'] return Response(url=tunnel_url, error=None)

except RequestException as e:

return Response(url=None, error=str(e))

The last step is to create a script that will create and serve the dashboard. We’ll use %%writefile on top of the code so it’ll be written on disk.

%%writefile my_dash_app.py

import dash

import dash_core_components as dcc

import dash_html_components as html

from dash.dependencies import Input, Output

import pandas as pd

import plotly.express as px external_stylesheets = [' https://codepen.io/chriddyp/pen/bWLwgP.css' app = dash.Dash(__name__, external_stylesheets=external_stylesheets) # THE PREVIOUS CODE TO CREATE THE GRAPHS COMES HERE # You can edit this layout to include more graphs

app.layout = html.Div(children=[

html.Div([

html.H1(children='COVID-19 Evolution in 2020'), dcc.Graph(

id='graph1',

figure=fig_map

),

]),

html.Div([

dcc.Graph(

id='graph2',

figure=fig_line

),

]),

]) if __name__ == '__main__':

app.run_server(debug=True, use_reloader=True)

Now, run the function to download Ngrok if you haven’t done it yet and run the server with the following commands.

tunnel = get_tunnel()

print(tunnel)

!python my_dash_app.py

You should see something like this.

Click on the first link to open your dashboard and there it is!