Plotly Choropleth Map Plots 的下拉菜单

Posted 2023-02-18

【中文标题】Plotly Choropleth Map Plots 的下拉菜单

【英文标题】：Dropdown menu for Plotly Choropleth Map Plots

【发布时间】：2020-08-28 05:45:44

【问题描述】：

我正在尝试创建等值线图。下面是一个有效的例子：

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 或其他方式更新图形的布局？

【问题讨论】：

你想在dash上还是在plain plotly上做？

我的目标是先在plotly上学习，然后移植到dash！

@rpanai 为什么不两者兼而有之？我很想看看这方面的一些例子=)

@westland 如你所愿：D

@rpanai 干得好！

【参考方案1】：

有两种方法可以解决这个问题

破折号

# 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

情节

在这种情况下，我们需要处理不同轨迹的可见性，并以显示一条轨迹并隐藏所有其他轨迹的方式创建按钮。

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

【讨论】：

哇，你是个传奇！感谢你的帮助。我将通过代码并学习它们！

我强调了要点，但如果您需要任何帮助，我可以添加一些 cmets。

是的，我们将不胜感激！

请让我知道您需要更好地理解哪一部分。