Interactive map with side bar chart

Question

I'm trying to figure out if there is a way to do what I have in mind in a Jupyter notebook. I'm familiar with geopandas, matplotlib, and plotly enough to be able to create a choropleth map. What I am trying to find a way to do is, from an interactive choropleth map click on any polygon of the map, and have a popup appear within the map with info defining that polygon, AND additionally, in an adjacent chart separate from the map, have a bar chart that responds to the polygon clicked on with additional data. So, an interactive pop up and side bar chart, that responds to a point clicked on the map, in sync with each other (the bar chart refreshes every time the pop up changes from a point clicked). I'm sure there's multiple ways to accomplish this; what would be the easiest to code in Jupyter, preferably based on plotly?

Rob Raymond · Answer

using dash you can create a callback on a map click
have setup some data to demonstrate, geometry and data
solution. Register callback to take click events from figure. In this case a choropleth. return new graph that in layout is alongside choropleth

@app.callback(
    Output("graph", "figure"),
    Input("map", "clickData")
)
def mapClick(clickData):
    return px.bar(df[clickData["points"][0]["location"]])

full MWE

import dash
import plotly.express as px
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash
import geopandas as gpd
import numpy as np
import pandas as pd

r = np.random.RandomState(42)

# some geometry
gdf = (
    gpd.read_file(gpd.datasets.get_path("naturalearth_lowres"))
    .loc[lambda d: d["continent"].eq("Africa")]
    .set_index("iso_a3", drop=False)
    .sample(20, random_state=r)
)

# some data to plot
df = (
    pd.DataFrame({i: r.uniform(v * 0.8, v, 10) for i, v in gdf["pop_est"].iteritems()})
    .assign(year=np.arange(2010, 2020))
    .set_index("year")
)


# create a choropleth
fig_m = px.choropleth_mapbox(
    gdf, geojson=gdf.__geo_interface__, locations="iso_a3", color="pop_est"
).update_layout(mapbox={"style": "carto-positron", "zoom": 1})


s = {"height": "40vh", "width": "48vw", "display": "inline-block"}

app = JupyterDash(__name__)
app.layout = dash.html.Div(
    [
        dash.dcc.Graph(
            id="map",
            figure=fig_m,
            style=s,
        ),
        dash.dcc.Graph(id="graph", style=s),
        dash.html.Div(id="debug")
    ]
)

# simple callback to update graph on click
@app.callback(
    Output("graph", "figure"),
    Input("map", "clickData")
)
def mapClick(clickData):
    return px.bar(df[clickData["points"][0]["location"]])

app.run_server(mode="inline", debug=True)

Interactive map with side bar chart

1 Answers

full MWE