Broken plotly choropleth graphs in Dash

Dash Python
1

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

image
image1529×907 95.2 KB

Example of custom choropleth mapbox working

image
image1258×911 112 KB

Example of Broken plotly graphs in Dash

image
image1916×906 68.4 KB

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!

2

have you upgraded dash recently?

3

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

1 Like