带有破折号/ plotly的下拉菜单

drop down menu with dash / plotly

如何使用下拉菜单制作此代码以在“新案例”和我的 csv 文件中的其他 2 列之间进行选择

# 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")    
  • 来源 OWID COVID 数据。重命名列以与相关列名称一致
  • 核心概念。为每一列构建一个图形。每个图形都包含迹线(数据)、框架和布局。关键是每个框架名称都是唯一的,因此添加了后缀(a、b 或 c)
  • 三个数字的积分
    • traces 很简单,只是从第一个图开始的 traces
    • frames比较简单,所有frames来自所有图
    • layout 从没有 play/pause 按钮的第一个图开始布局
  • updatemenus 是所需列的下拉列表。 argssliderscoloraxis 来自适当的图
  • 每一列都使用了不同的色标。对每一列使用了不同的 max for range_color,根据基础数据计算
  • 播放/暂停已被删除 - 使用这个概念可以使它们部分工作 https://plotly.com/python/animations/#defining-button-arguments 然而这意味着您需要从 updatemenus ]updatemenusupdatemenus
  • 的完全静态结构中确实不起作用
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 解决方案

  • 使用破折号变得非常简单,只需构建与列一样多的数字
  • 带回调的下拉菜单选择合适的数字
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")