Issue with pointNumbers when crossfiltering histogram data into scatter map

đź“Š Plotly Python
1

Hi altogether,

for the evaluation I’m working on, I aggregated georeferenced data to display in a histogram. To explore the aggregated data, I want to be able to select a sub set in the histogram and display the included data points on a map.

Unfortunately, I’m experiencing issues with the crossfiltering. It seems that the pointNumbers of the selected bars are “messed up” or just don’t represent the indices of the dataframe. I made a small application demonstrating the behavior:

from dash.dependencies import Input, Output
from plotly import graph_objects as go

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.express as px

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/1962_2006_walmart_store_openings.csv")

app = dash.Dash(__name__)
app.layout = html.Div([

    html.Div([
        dcc.RadioItems(
            id="stacking--radioitem",
            options=[
                {"label": "None", "value": "None"},
                {"label": "Type", "value": "type_store"}
            ],
            value="None"
        ),
        dcc.Graph(id="evaluation--histogram", style= {"height": "60vh"}),
        dcc.Graph(id="accident-map--scattermapbox")
    ])
])


@app.callback(
    Output("evaluation--histogram", "figure"),
    Input("stacking--radioitem", "value")
)
def update_histogram(stacking):
    if stacking == "None":
        fig = px.histogram(
            data_frame=df,
            x="YEAR"
            )
    else:
        fig = px.histogram(
            data_frame=df,
            x="YEAR",
            color="type_store",
            category_orders={"type_store": ["Supercenter", "Wal-Mart"]}
            )

    fig.update_layout(barmode="group", clickmode="event+select")
    return fig


@app.callback(
    Output("accident-map--scattermapbox", "figure"),
    Input("evaluation--histogram", "selectedData")
)
def update_map(selectedData):
    if selectedData == None:
        selected_gdf = df
    else:
        indices = []
        for p in selectedData["points"]:
            for idx in p["pointNumbers"]:
                indices.append(idx)

        selected_gdf = df[df.index.isin(indices)]

    fig = go.Figure()
    fig.add_trace(go.Scattergeo(
        mode="markers",
        lat=selected_gdf.LAT,
        lon=selected_gdf.LON,
        text=selected_gdf['YEAR'].astype(str) + '<br />' + selected_gdf['type_store']
        ))
    fig.update_geos(fitbounds="locations", scope="north america")
    fig.update_layout(height=800)

    fw = go.FigureWidget(fig)

    return fw


if __name__ == "__main__":

    app.run_server(debug=True)

Expected outcome:
Selecting a bar or several bars at once using the box select filters the related points on the map. Means: When selecting the bar at year 1990 for example, all stores which opened in this year are displayed on the map below. This can actually be experienced when using the default mode where “none” is selected in the radio choice on the top.

Actual outcome:
When selecting the option “type” on the top, the bars are split for the store types “Wal-Mart” and “Supercenter”. So far, so good. If one now selects the blue bar for the year 1990 again, the map below shows stores opened in 1987 and both types, “Wal-Mart” and “Supercenter” instead of the actual selection. The red bar for 1980 shows stores of both types opened 1973 and 1974 and so on. It seems that plotting several figures in the same plot messes up the indexing of the points.

I also tried adding customdata fields which point to the correct indices. Since the histogram condenses the unique elements into one bar, I was only able to add a customdata field for each bar, not for every pointNumber contained. As a subsequence I was not able to get customdata for all points aggregated in one bar.

It would be great if someone could give me some hints how to extract the actual dataframe indices from the selected bars instead! :slightly_smiling_face: