Dcc Graph won't place a go.Choropleth map, instead shows base map with colour bar

[doogyb]

Hi,

I’m running into some difficulty with Choropleth maps…

I’ve placed this component in my dash app:

dcc.Graph(
         figure=dict(
             data=[
                 go.Choropleth(
                     geojson=county_geojson,
                     locationmode="geojson-id",
                     locations=counties.index,  # Spatial coordinates
                     z=counties.astype(int),  # Data to be color-coded
                     featureidkey="properties.name",
                 )
             ]
         )
     )

Which returns the following:

However, if I use the exact same code as above and simply call fig.show(), the correct choropleth maps appears:

import plotly.graph_objects as go

fig = go.Figure(
    data=go.Choropleth(
        geojson=county_geojson,
        locations=counties.index,  # Spatial coordinates
        z=counties.astype(int),  # Data to be color-coded
        featureidkey="properties.name",
    )
)
fig.update_geos(fitbounds="locations", visible=False)
fig.show()

Any help with this would be greatly appreciated!

Thanks,

Sam

[chriddyp]

Try upgrading dash. The dash & plotly libraries each bundle their own version of plotly.js, the underlying JavaScript graphing library.

[doogyb]

That did the trick!

I’m still getting used to using conda (I have to use Windows at work ) so just using conda update dash would install dash-1.4.0 (and never notify me that a later version was available). I think this is due to dependency issues… Anyway I upgraded all the packages in my environment and was able to upgrade to the appropriate dash version.

Thank you so much for your timely reply!

Oh and by the way, Dash and Plotly are amazing, thank you for the great work!

[kkelderman]

@chriddyp, maybe this needs to be a new question, but what if both plotly and dash are up to date and this problem still persists?

[chriddyp]

@kkelderman

this problem still persists?

hey @kkelderman - thanks for reporting. could you create a simple, reproducible example with dummy data that shows the issue? that’ll help us determine if this is a bug and fix it

[kkelderman]

Sure thing.

I’ve managed to create the choropleth map in a Jupyter notebook:

But when I try to use the same code in Pycharm for my dash app, this is the result:

Here is a link to the git repo: https://github.com/hkkelderman/STEERS-Dash-App. It includes the code and data used for both the Jupyter Notebook and the Dash App.

[kkelderman]

@chriddyp, just checking in to see if this was a bug you found? I’ve contintued to work on the issue and still haven’t found a solution. I’ve included my code within the comment with smaller example data in case that’s more useful than the repository I linked:

Code in Jupyter Notebook (again, this works fine and returns the choropleth map)

# Libraries
import pandas as pd
import plotly.express as px
from urllib.request import urlopen
import json
with urlopen('https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json') as response:
    counties = json.load(response)

#Dataframe
df = pd.DataFrame(
    {
        "County": ['Andrews', 'Atascosa', 'Bee', 'Bexar', 'Brazoria'],
        "fips": ['48003', '48013', '48025', '48029', '48039'],
        "Tons Emitted": [2024.73, 42.63, 11.09, 1.02, 1585.57],
        "Region": ['Texas', 'Texas', 'Texas', 'Texas', 'Texas'],
        "Type": ['All', 'All', 'All', 'All', 'All']
    })

#Choropleth map
fig = px.choropleth(df, 
              geojson=counties,
              locations='fips',
              color='Tons Emitted',
              scope='usa')
fig.update_geos(fitbounds='locations')
fig.show()

Code for Dash App (this is executed in PyCharm)

#Libraries
import pandas as pd
import plotly.express as px
from urllib.request import urlopen
import json
with urlopen('https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json') as response:
    counties = json.load(response)
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

df = pd.DataFrame(
    {
        "County": ['Andrews', 'Atascosa', 'Bee', 'Bexar', 'Brazoria'],
        "fips": ['48003', '48013', '48025', '48029', '48039'],
        "Tons Emitted": [2024.73, 42.63, 11.09, 1.02, 1585.57],
        "Region": ['Texas', 'Texas', 'Texas', 'Texas', 'Texas'],
        "Type": ['All', 'All', 'All', 'All', 'All']
    })

# App Layout ------------
app.layout = html.Div([

    html.H1("2019 Texas Emissions Event Database (STEERS)", style={'text-align': 'center'}),

    dcc.Dropdown(id="slct_region",
                 options=[
                     {"label": "Texas", "value": "Texas"},
                     {"label": "Permian Basin", "value": "Permian Basin"},
                     {"label": "Gulf Coast", "value": "Gulf Coast"}],
                 multi=False,
                 value="Texas",
                 style={'width': "40%"}),

    html.Br(),
    dcc.Dropdown(id="slct_contam",
                 options=[
                     {"label": "All", "value": "All"},
                     {"label": "GHG", "value": "GHG"},
                     {"label": "HAP", "value": "HAP"},
                     {"label": "NOX", "value": "NOX"},
                     {"label": "Other", "value": "Other"},
                     {"label": "PM", "value": "PM"},
                     {"label": "SO2", "value": "SO2"},
                     {"label": "SOX", "value": "SOX"},
                     {"label": "TOX", "value": "TOX"},
                     {"label": "VOC", "value": "VOC"}],
                 multi=False,
                 value="All",
                 style={'width': "40%"}),

    dcc.Graph(id='emission_map')
])


# Callback -----------
@app.callback(
    Output('emission_map', 'figure'),
    [Input('slct_region', 'value'),
     Input('slct_contam', 'value')])
def update_fig2(region, contam):
    dff3 = df.copy()
    dff3a = dff3[(dff3['Region'] == region)]
    dff3b = dff3a[dff3a['Type'] == contam]

    fig2 = px.choropleth(data_frame=dff3b,
                         geojson=counties,
                         locations="fips",
                         color='Tons Emitted',
                         scope='usa'
                         )
    fig2.update_geos(fitbounds="locations")
    fig2.update_layout(margin={"r": 0, "t": 0, "l": 0, "b": 0})
    return fig2


# Execute app ---------------------
if __name__ == '__main__':
    app.run_server(debug=True, )

Thanks again for looking into this

[chriddyp]

Could you try upgrading dash? pip install dash —upgrade

[kkelderman]

That worked! But I thought I updated dashcorrectly when I first came across this question, guess I didn’t.

Thanks for your help @chriddyp

[Kuraffen]

I have the same problem, and it seems that updating dash and plotly does not help. I run plotly v.4.14.3 ans dash v.1.19.0.

I even tried to run the code in the documentation (Choropleth Maps | Python | Plotly)

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

df = px.data.election()
geojson = px.data.election_geojson()
candidates = df.winner.unique()

app = dash.Dash(__name__)

app.layout = html.Div([
    html.P("Candidate:"),
    dcc.RadioItems(
        id='candidate', 
        options=[{'value': x, 'label': x} 
                 for x in candidates],
        value=candidates[0],
        labelStyle={'display': 'inline-block'}
    ),
    dcc.Graph(id="choropleth"),
])

@app.callback(
    Output("choropleth", "figure"), 
    [Input("candidate", "value")])
def display_choropleth(candidate):
    fig = px.choropleth(
        df, geojson=geojson, color=candidate,
        locations="district", featureidkey="properties.district",
        projection="mercator", range_color=[0, 6500])
    fig.update_geos(fitbounds="locations", visible=False)
    fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

    return fig

app.run_server(debug=True)

This is the result:

But when i use fig.show() in stead of dash, I get:

[thomasbendel]

I have the same problem as @Kuraffen
Can´t reproduce the documentation examples.
When I use fig.show(), result is good. In dash, it results in an empty map.

I use plotly 5.1.0 and dash 1.19.0.
Is there a proofed version-combination that works?
Thanks a lot.

[thomasbendel]

I tried it now with python=3.6, plotly 5.1.3 and dash 2.0.0. It works!

[sean54123]

Hi,

I’m getting the same issue as OP. I can create the choropleth maps in Jupyter and view them after writing as an HTML file.

Is there a combination of new ish dash/plotly versions that works? I’ve tried both using the latest version (dash==2.5.1 and plotly == 5.9.0) and some older versions which should use the same version of plotly.js (e.g. dash==2.4.0 and plotly==5.8.0).

I can provide a code example if that helps.

Thanks in advance!