✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Broken plotly choropleth graphs in Dash

I’ve been having an issue with using some of px.choropleth maps working in dash where the graphs generates correctly in plolty but will not be displayed correctly when integrating with Dash and does not throw any errors.

Example of plotly working example

Example of custom choropleth mapbox working

Example of Broken plotly graphs in Dash

Code Example Recreation from Plotly own Guide

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

import pandas as pd
import json


def plotly_example_test():
    """
    creates the example from plotly docs
    NOTE: https://plot.ly/python/choropleth-maps/
    """
    df = px.data.election()
    geojson = px.data.election_geojson()

    fig = px.choropleth(df, geojson=geojson, color="Bergeron",
                        locations="district", featureidkey="properties.district",
                        projection="mercator"
                        )
    fig.update_geos(fitbounds="locations", visible=False)
    fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
    return fig
test=plotly_example_test()
test.show()

# Tests how the above function works in dash
app=dash.Dash()


inputs=html.Div([
    dcc.Input(id='my-id', value='initial value', type='text'),
    html.Div(id='my-div')
])

#Html code for the plotly example
plotly_example_graphs=html.Div(
    [
        dcc.Graph(id="map")
    ]
)

app.layout=html.Div([inputs,plotly_example_graphs])



@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)

@app.callback(
    Output(component_id='map', component_property='figure'),
    [Input(component_id='my-id', component_property='value')]
)
def plotly_example_test_2(*args):
    """
    creates the example from plotly docs
    NOTE: https://plot.ly/python/choropleth-maps/
    """
    fig=plotly_example_test()
    return fig

@app.callback(
    Output(component_id='custom-map', component_property='figure'),
    [Input(component_id='my-id', component_property='value')]
)
def custom_map_example(*args):
    fig=custom_mapbox()
    return fig

app.run_server(port=8050, host='0.0.0.0')

When playing around with different things I did notice I could recreate the broken plotly example in pure plotly by removing the update_geos() method however I main goal is to get the custom mapbox working and does seem to be that both issues are related.

If anyone can give any advice or tips on how to resolve this it would be greatly appreciated!

have you upgraded dash recently?

thank chriddy, don’t know why I didn’t think or try that earlier!

1 Like