drop down menu with dash / plotly - python-3.x

Question

How can I make this code with drop down menu to chose between "New Cases" and 2 other columns that I have in my csv file
# load in new csv to merge with geodata
import pandas as pd
df = pd.read_csv("ALLCOUNTRIES-PREDICTED.csv", header=0, encoding="utf-8")
import plotly.express as px
fig = px.choropleth(df,
locations="iso_alpha_3",
color="New Cases", # identify representing column
hover_name="Country", # identify country code column
animation_frame="Date", # identify date column
projection="equirectangular", # select projection
color_continuous_scale = 'Reds', # select prefer color scale
range_color=[0,10000] # select range of dataset
)
fig.show()
fig.write_html("example_map1.html")

Answer 1

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")