- source OWID COVID data. Renamed columns to be consistent with column names in question
- core concept. Build a figure for each column. Each figure contains traces (data), frames and layout. Key is that each frame name is unique, hence addition of a suffix (a, b or c)
- integrate three figures
- traces is simple, just traces from first figure
- frames is relatively simple, all frames from all figures
- layout take layout from first figure without play/pause buttons
- updatemenus is drop down of required columns. args are sliders and coloraxis from appropriate figure
- have used different color scales for each column. have used a different max for range_color for each column, calculated from underlying data
- play / pause have been removed - they can be made to partially work using this concept https://plotly.com/python/animations/#defining-button-arguments However this means you then need to updatemenus from updatemenus which really does not work in a completely static structure that updatemenus is
import pandas as pd
import io, requests
import plotly.express as px
import plotly.graph_objects as go
# get OWID COVID data
dfall = pd.read_csv(
io.StringIO(
requests.get(
"https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/owid-covid-data.csv"
).text
)
)
# filter make data frame have same columns as question and filter to a few days..
dfall["date"] = pd.to_datetime(dfall["date"])
df = dfall.rename(
columns={
"iso_code": "iso_alpha_3",
"new_cases": "New Cases",
"location": "Country",
"date": "Date",
}
).loc[lambda d: d["Date"].ge("1-nov-2021")]
df["Date"] = df["Date"].dt.strftime("%Y-%b-%d")
# three columns we're going to build choropleths from
cols = ["New Cases", "new_deaths", "new_vaccinations"]
# build figures for each of the required columns
# key technique is append a suffix to animation frame so each frame has it's
# own name...
figs = [
px.choropleth(
df.assign(Date=lambda d: d["Date"] + f"~{suffix}"),
locations="iso_alpha_3",
color=c, # identify representing column
hover_name="Country", # identify country code column
animation_frame="Date", # identify date column
projection="equirectangular", # select projection
color_continuous_scale=color, # select prefer color scale
range_color=[
0,
df.groupby("Date")[c].quantile(0.75).mean(),
], # select range of dataset
)
for c, color, suffix in zip(cols, ["Blues", "Reds", "Greens"], list("abc"))
]
# play / pause don't work as don't stop between columns..
layout = {
k: v
for k, v in figs[0].to_dict()["layout"].items()
if k not in ["template", "updatemenus"]
}
# build figure from all frames, with layout excluding play/pause buttons
fig = go.Figure(
data=figs[0].data, frames=[fr for f in figs for fr in f.frames], layout=layout
)
# finally build drop down menu...
fig = fig.update_layout(
updatemenus=[
{
"buttons": [
{
"label": c,
"method": "relayout",
"args": [
{
"coloraxis": col_fig.layout.coloraxis,
"sliders": col_fig.layout.sliders,
}
],
}
for c, col_fig in zip(cols, figs)
]
}
]
)
fig
dash / plotly solution
- using dash it becomes very simple, just build as many figures as columns
- dropdown with call back just picks appropriate figure
import pandas as pd
import io, requests
import plotly.express as px
import plotly.graph_objects as go
import dash
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash
# get OWID COVID data
dfall = pd.read_csv(
io.StringIO(
requests.get(
"https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/owid-covid-data.csv"
).text
)
)
# filter make data frame have same columns as question and filter to a few days..
dfall["date"] = pd.to_datetime(dfall["date"])
df = dfall.rename(
columns={
"iso_code": "iso_alpha_3",
"new_cases": "New Cases",
"location": "Country",
"date": "Date",
}
).loc[lambda d: d["Date"].ge("1-nov-2021")]
df["Date"] = df["Date"].dt.strftime("%Y-%b-%d")
# three columns we're going to build choropleths from
cols = ["New Cases", "new_deaths", "new_vaccinations"]
# build figures for each of the required columns
figs = [
px.choropleth(
df,
locations="iso_alpha_3",
color=c, # identify representing column
hover_name="Country", # identify country code column
animation_frame="Date", # identify date column
projection="equirectangular", # select projection
color_continuous_scale=color, # select prefer color scale
range_color=[
0,
df.groupby("Date")[c].quantile(0.75).mean(),
], # select range of dataset
)
for c, color in zip(cols, ["Blues", "Reds", "Greens"])
]
# Build App
app = JupyterDash(__name__)
app.layout = dash.html.Div(
[
dash.dcc.Dropdown(
id="choropleth",
options=[{"label": c, "value": i} for i, c in enumerate(cols)],
value=0,
),
dash.dcc.Graph(
id="map",
),
]
)
@app.callback(Output("map", "figure"), Input("choropleth", "value"))
def updateGraph(id):
if not id: return figs[0]
return figs[int(id)]
# Run app and display result inline in the notebook
app.run_server(mode="inline")
