Plotly Choropleth_mapbox plots with Dash interactivity

Question

I am a GIS person fairly new to Plotly and exceptionally new to Dash. I'm trying to mostly copy an example solution from a post here:

drop down menu with dash / plotly

To build an interactive app to look at various choropleth maps based on choropleth_mapbox figures. The last solution from the above post, using Plotly and Dash by Rob Raymond, looks brilliant and close to what I am trying to do. But in my case, my figures built on several data 'columns' also require an individual update_layout call and a hovertemplate built for each data column; and I cannot figure out where to place those definitions within the solution posted above.

This is my code for a single data column's figure, which gives me the functionality I want in the layout and hover tool:

    fig = px.choropleth_mapbox(
        gdf_blks_results,
        geojson = gdf_blks.geometry,
        locations = gdf_blks_results.index,
        color=classme.yb,
        color_continuous_scale = "YlOrRd",
        center={"lat": 18.2208, "lon": -66.49},
        mapbox_style="open-street-map",
        width=800,
        height=500,
        custom_data = [gdf_blks_results['GEOID'], 
        gdf_blks_results['overallBurden']]
        
        )
        fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0}, 
    coloraxis_colorbar=dict(              
            title="burden",
            thicknessmode="pixels",
            lenmode="pixels",
            yanchor="top",y=1,
            ticks="outside",
            tickvals=[0,1,2,3,4],
            ticktext=myclasses,
            dtick=5
        ))
        # hover template
        hovertemp = '<i>Census ID :</i> %{customdata[0]}<br>'                   
        hovertemp += '<i>burden : </i> %{customdata[1]:.5f}<br>'
        fig.update_traces(hovertemplate=hovertemp)

        fig.show()

My question is, how do I incorporate that into the list of figures for a set of columns of data with custom template and figure update info for each? I tried to add it to the figure definitions in the cited post example before the "for c, color in zip(...)" statement, but I cannot get the syntax right, and I am not sure why not.

score 0 · Answer 1 · answered Sep 28 '22 at 02:56

I think you should create a Dropdown list with Options as gdf_blks_results columns the returns it with callback to update choropleth map. Please refer below code:

import pandas as pd
import numpy as np
import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import dash_table
import dash_bootstrap_components as dbc


columns_list = list(gdf_blks_results.columns)

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            html.H5('Columns',className='text-center'),
        ],width={'size':2,"offset":0,'order':1}),
        dbc.Col([
            dcc.Dropdown(id='columns',placeholder="Please select columns",
                         options=[{'label':x,'value':x} for x in columns_list],
                         value=[],
                         multi=False,
                         disabled=False,
                         clearable=True,
                         searchable=True),
        ],width={'size':10,"offset":0,'order':1})
    ], className='p-2 align-items-stretch'),
    dbc.Row([
        dbc.Col([
            dcc.Graph(id="choropleth_maps",figure={},style={'height':500}), #Heatmap plot
        ],width={'size':12,'offset':0,'order':2}),
    ]),
])

@app.callback(Output('choropleth_maps', 'figure'),
             [Input('columns', 'value')])

def update_graph(columns):
    
    fig = px.choropleth_mapbox(
        gdf_blks_results,
        geojson = gdf_blks.geometry,
        locations = gdf_blks_results.index,
        color=columns,
        color_continuous_scale = "YlOrRd",
        center={"lat": 18.2208, "lon": -66.49},
        mapbox_style="open-street-map",
        width=800,
        height=500,
        custom_data = [gdf_blks_results['GEOID'],
                       gdf_blks_results['overallBurden']])
    fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0}, 
    coloraxis_colorbar=dict(              
            title="burden",
            thicknessmode="pixels",
            lenmode="pixels",
            yanchor="top",y=1,
            ticks="outside",
            tickvals=[0,1,2,3,4],
            ticktext=myclasses,
            dtick=5
        ))
        # hover template
    hovertemp = '<i>Census ID :</i> %{customdata[0]}<br>'                   
    hovertemp += '<i>burden : </i> %{customdata[1]:.5f}<br>'
    fig.update_traces(hovertemplate=hovertemp)
    return fig

if __name__ == "__main__":
    app.run_server(debug=False,port=1116)

Plotly Choropleth_mapbox plots with Dash interactivity

1 Answers1