drop down menu with dash / plotly

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