Problem with go.Choropleth in a web app

📊 Plotly Python
1

Hi guys!

I’m a rookie trying to make a web dashboard with plotly graph objects.

I’m having a problem with a go.Choropleth. There’s something wrong when I’m trying to render it.

When I make the mapbox to show it in a jupyter notebook, it works fine. This is the code:

fig = go.Figure(go.Choroplethmapbox(geojson=regions, locations=full_latest_grouped2['Region'],
                                    featureidkey="properties.NOME_REG",
                                    z=full_latest_grouped2['Confirmed'], colorscale='matter', zmin=0, zmax=max(full_latest_grouped2['Confirmed']),
                                    marker_opacity=0.8, marker_line_width=0.1))
fig.update_layout(mapbox_style="carto-positron",
                  mapbox_zoom=4, mapbox_center = {"lat": 41.8719, "lon": 12.5674})
fig.update_layout(margin={"r":0,"t":30,"l":0,"b":0})
fig.update_layout(title='Confirmed Cases by Region')
fig.show()

But in the app the mapbox does not render properly https://imgur.com/a/TYnruii. I think I’m doing something wrong in the backend process.

In the backend, I’m making a list of figures that will then be rendered in the frontend.

This is the example of the choropleth mapbox (which is the first in my list):

    figures.append(dict(data=graph_one, layout=layout_one))

where

graph_one = []

graph_one.append(
            go.Figure(go.Choroplethmapbox(
            geojson=regions,
            locations=full_latest_grouped2['Region'],
            featureidkey="properties.NOME_REG",
            z=full_latest_grouped2['Confirmed'],
            colorscale='matter',
            zmin=0,
            zmax=max(full_latest_grouped2['Confirmed']),
            marker_opacity=0.8, marker_line_width=0.1)))

layout_one = dict(title = "Confirmed Cases by Region",
    mapbox_style = "carto-positron",
    mapbox_zoom = 4, mapbox_center = dict(lat = 41.8719, lon = 12.5674),
    margin = dict(r = 0, t = 30, l = 0, b = 0))

I’m then using the JSON encoder to convert the plotly figures to JSON for the javascript in my html.

    figuresJSON = json.dumps(figures, cls=plotly.utils.PlotlyJSONEncoder)

I think I’m doing something wrong when I’m making the graph_one and layout_one objects. It might be because the Choropleth is wrapped around a Figure object?

I have go.Scatter objects in my list of figures, and they render fine.

This is an example of a go.Scatter:

graph_two = []

graph_two.append(
      go.Bar(
      x = df.country.tolist(),
      y = df.hectaresarablelandperperson.tolist(),
      )
    )

layout_two = dict(title = 'Hectares Arable Land per Person in 2015',
                xaxis = dict(title = 'Country',),
                yaxis = dict(title = 'Hectares per person'),
                )