Selection behavior in plotly-dash Choropleth mapbox plot

Viewed 600

I am trying to modify the standard selection behavior of the Plotly-Dash Choropleth (Mapbox) plot.

  • Default behavior is the "classic" shift+select for multi-select: hold shift and click/lasso select and each new selection is added to selection pool. When shift is not pressed any longer, any subsequent selection will reset the pool.

Question: I want a more persistent select behavior where each selection adds to the pool (without shift), and then a reset button to reset selection and empty pool. Is this possible with plotly-dash.

I checked the docs and the layout.clickmode does not seem to have any option like this. Do I have to continously update graph for each click or is there some better way?

A small MWE here:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.express as px

import geopandas as gpd

print('Loading data...')
gdf = gpd.read_file('https://gist.githubusercontent.com/Tlaloc-Es/5c82834e5e4a9019a91123cb11f598c0/raw/709ce9126861ef7a7c7cc4afd6216a6750d4bbe1/mexico.geojson')
gdf = gdf.to_crs(epsg=4326)

print('Done!')
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div([
                dcc.RadioItems(
                    id='radio-color_on',
                    options=[{'label': i, 'value': i} for i in ['AREA','PERIMETER']],
                    value='AREA',
                    labelStyle={'display': 'inline-block'}
                ),
    ],style={'width': '40%', 'display': 'inline-block',}),

html.Div([], style={'width':'100%'}),

    html.Div([
                dcc.Graph(id="fig")
    ],style={'width': '60%', 'display': 'inline-block', 'padding': '0 10',},),
]) 

@app.callback(
    Output("fig", "figure"), 
    [Input("radio-color_on", "value")])
def draw_choropleth(color_on):
    fig = px.choropleth_mapbox(gdf, 
                            geojson=gdf.geometry, 
                            locations=gdf.index, 
                            color=color_on,
                            color_continuous_scale="Viridis",
                            range_color=(0, 12),
                            mapbox_style="open-street-map",
                            zoom=3, 
                            center = {"lat":gdf.centroid.y.mean(), "lon":gdf.centroid.x.mean()},
                            opacity=0.5,
                            )
    fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0},
                        clickmode='event+select',
                        height=700,
                        )
    #fig.update_geos(fitbounds="locations", visible=False)
    return fig

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

and the resulting dash app GIF showing how it looks, and the selection behavior. At first I hold in shift, and when released and selecting, previous selections reset.

This GIF shows what happens.

0 Answers
Related