The Startup
Published in

The Startup

How to Create a Simple Dashboard With Plotly

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.

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.zip
pass

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'])
session = requests.Session()
retry = Retry(connect=3, backoff_factor=0.5)
adapter = HTTPAdapter(max_retries=retry)
session.mount('http://', adapter)
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!

Final result

Notice that the link will work only as long as you keep the server running. You can use other hosting services for a permanent link, like Heroku.

References

Coronavirus Source Data
https://ourworldindata.org/coronavirus-source-data

Countries Geographic Coordinates
https://www.kaggle.com/eidanch/counties-geographic-coordinates

IPython Notebook
https://github.com/edusrmt/one-figure-projects

Plotly Express
https://plotly.com/python/plotly-express/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store