Plotly Choropleth 地图绘制的下拉菜单

Question

我正在尝试创建区域分布图。下面是一个可用的示例：

df = px.data.gapminder().query("year==2007")

fig = go.Figure(data=go.Choropleth(
    locations=happy['iso'], # Spatial coordinates
    z = happy['Happiness'].astype(float), # Data to be color-coded
    colorbar_title = "Happiness Score",
))

fig.update_layout(
    title_text = 'Life Expectancy in 2007'
)

fig.show()

然而，我希望创建一个下拉菜单，可以在不同的变量之间更改绘制的数值（例如：预期寿命、GDP、人口）。我相信这是可能的，但在网上没有看到任何教程。大多数教程只使用其他类型的条形图或散点图。

以下是我迄今为止完成的内容：

# Initialize figure
fig = go.Figure()

# Add Traces
fig.add_trace(go.Figure(data=go.Choropleth(
    locations=df['iso_alpha'], # Spatial coordinates
    z = df['lifeExp'].astype(float), # Data to be color-coded
    colorbar_title = "Life Expectancy")))

fig.add_trace(go.Figure(data=go.Choropleth(
    locations=df['iso_alpha'], # Spatial coordinates
    z = df['gdpPercap'].astype(float), # Data to be color-coded
    colorbar_title = "GDP per capita")))

但是我不确定如何从这里继续。我是否需要通过 fig.update_layout 或其他方式更新图表的布局？

- TYL

---

你想在Dash上做还是在普通的Plotly上做？ - rpanai

我的目标是先在 Plotly 上学习，然后再移植到 Dash！ - TYL

在这种情况下，相反其实更容易。 - rpanai

为什么不两者都有呢？我很想看一些例子 =) - vestland

@westland 您所愿意的:D - rpanai

做得好！ - vestland

Answer 1

有两种方法来解决这个问题

Dash

# save this as app.py
import pandas as pd
import plotly.graph_objs as go
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html

# Data
df = px.data.gapminder().query("year==2007")

df = df.rename(columns=dict(pop="Population",
                            gdpPercap="GDP per Capita",
                            lifeExp="Life Expectancy"))

cols_dd = ["Population", "GDP per Capita", "Life Expectancy"]

app = dash.Dash()
app.layout = html.Div([
    dcc.Dropdown(
        id='demo-dropdown',
        options=[{'label': k, 'value': k} for k in cols_dd],
        value=cols_dd[0]
    ),

    html.Hr(),
    dcc.Graph(id='display-selected-values'),

])

@app.callback(
    dash.dependencies.Output('display-selected-values', 'figure'),
    [dash.dependencies.Input('demo-dropdown', 'value')])
def update_output(value):
    fig = go.Figure()
    fig.add_trace(go.Choropleth(
       locations=df['iso_alpha'], # Spatial coordinates
        z=df[value].astype(float), # Data to be color-coded
        colorbar_title=value))
    fig.update_layout(title=f"<b>{value}</b>", title_x=0.5)
    return fig

if __name__ == '__main__':
    app.run_server()

运行以下命令：python app.py，并打开 http://127.0.0.1:8050

Plotly

在这种情况下，我们需要控制不同图形的可见性，并创建按钮以显示一个跟踪项并隐藏所有其他跟踪项。

import pandas as pd
import numpy as np
import plotly.graph_objs as go
import plotly.express as px

# Data
df = px.data.gapminder().query("year==2007")
df = df.rename(columns=dict(pop="Population",
                            gdpPercap="GDP per Capita",
                            lifeExp="Life Expectancy"))
cols_dd = ["Population", "GDP per Capita", "Life Expectancy"]
# we need to add this to select which trace 
# is going to be visible
visible = np.array(cols_dd)

# define traces and buttons at once
traces = []
buttons = []
for value in cols_dd:
    traces.append(go.Choropleth(
       locations=df['iso_alpha'], # Spatial coordinates
        z=df[value].astype(float), # Data to be color-coded
        colorbar_title=value,
        visible= True if value==cols_dd[0] else False))

    buttons.append(dict(label=value,
                        method="update",
                        args=[{"visible":list(visible==value)},
                              {"title":f"<b>{value}</b>"}]))

updatemenus = [{"active":0,
                "buttons":buttons,
               }]


# Show figure
fig = go.Figure(data=traces,
                layout=dict(updatemenus=updatemenus))
# This is in order to get the first title displayed correctly
first_title = cols_dd[0]
fig.update_layout(title=f"<b>{first_title}</b>",title_x=0.5)
fig.show()

- rpanai

---

哇，你真是个传奇！感谢你的所有帮助。我会仔细研究这些代码并学习它们！ - TYL

我已经强调了主要的要点，但如果您需要帮助，我可以添加一些注释。 - rpanai

是的，评论将不胜感激！ - TYL

请告诉我您需要更好地理解哪个部分。 - rpanai