如何使用可点击地图作为折线图的过滤器？

Question

我是 Plotly Dash 的新手。我在 Tableau 中创建了一些仪表板，在 Tableau 中我有一个仪表板，旁边有一张地图和一个折线图，我可以在地图上显示 select 个位置，折线图显示了该传感器的时间序列折线图。我尝试在 Dash 中执行此操作并学习一些新工具，例如 Dash，因为我经常使用 Plotly 及其漂亮的图表。

我在数据库上有一些内部数据，其中有一些复杂的逻辑，我在一个单独的文件上有位置，因为我想拥有尽可能少的数据我不想在 SQL 查看。对于这个问题，我使用了网络上可用的数据。

我有来自不同位置的传感器的传感器测量数据，例如 no2、no、o3 等。我的目标是制作一张包含传感器位置的地图。当我点击一个位置时，它应该会显示折线图，我希望能够 select 尽可能多的位置，以便我可以比较折线图。

这可能吗？我有折线图，但无法将零件与地图连接起来工作。我将以此为基础来包含更多图表，如条形图等。顶部 select 或将是 select 参数的下拉菜单，如 no2、pm25。非常感谢。

这是目前为止的折线图：

import plotly.express as px
from jupyter_dash import JupyterDash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import pandas as pd
import dash

# Load Data
df = pd.read_csv('no_data.txt') # file with the measurement data
mp = pd.read_csv('location_sensors.csv') # file with the location data, 3 locations are used in this sample data

# Build App
app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(id='dropdown_parameter',
            options=[{'label':x, 'value':x} for x in df['parameter'].unique()],
            value='no2',
            multi=False,
            disabled=False,
            clearable=True,
            searchable=True,
            placeholder='Choose parameter...'
            ),  
    
    html.Div([
        dcc.Graph(id='map_filter'),
        dcc.Graph(id='line_chart')
    ]),
])

@app.callback(
    Output('line_chart', 'figure'),
    Input('dropdown_parameter', 'value'),
)
def update_graph(parameter_chosen):
    dff = df[(df['parameter']==parameter_chosen)]
    fig = px.line(dff, x='date.utc', y='value', color='location')
    return fig

app.run_server(debug=False)

数据：折线图测量数据：https://github.com/pandas-dev/pandas/blob/master/doc/data/air_quality_long.csv

位置数据：

location,latitude,longitude
BETR801,51.20966,4.43182
FR04014,48.83722,2.3939
London Westminster,51.49467,-0.13193

Answer 1

如果您不必为地图使用 Graph 组件，dash-leaflet 中的 Map 组件本身就支持点击事件。这是一个小例子，其中地图点击用于更新图表，

import dash_leaflet as dl
import plotly.graph_objs as go
from dash import Dash, dcc, html, Input, Output, State

style = {'width': '50%', 'height': '500px', 'float': 'left'}
# Build small example app.
app = Dash(__name__)
app.layout = html.Div([
    dl.Map(dl.TileLayer(), style=style, id='map'),
    dcc.Graph(id='graph', style=style),
    dcc.Store(id='locations', data=[])
], style={"overflow": "hidden"})

@app.callback(Output('locations', 'data'), Input('map', 'click_lat_lng'),
              State('locations', 'data'), prevent_initial_call=True)
def update_locations(click_lat_lng, locations):
    # Collect location data in a store.
    return locations + [click_lat_lng]

@app.callback(Output('graph', 'figure'), Input('locations', 'data'))
def update_graph(locations):
    # Generate figure based on click data (to simply the example, I just plot lat and lon as bars).
    return go.Figure([go.Bar(x=["Latitude", "Longitude"], y=l) for l in locations])

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

如何使用可点击地图作为折线图的过滤器？

How to use clickable map as a filter for line chart?

python

plotly

plotly-dash