GeoJSON Error : Uncaught (in promise) Error: Unexpected error while fetching from {"type": "FeatureCollection",

Question

I am attempting to plot a Choropleth using plotly and geojson data. While I am able to plot the base map using mapbox, the colored polygons used to represent spatial data is missing.

Here's the code:

import pandas as pd 
import geopandas as gpd
import mapbox
from plotly import graph_objs as go
from plotly.graph_objs import *

df_geo = gpd.read_file('https://raw.githubusercontent.com/uscensusgeo.geojson')

# CRS
df_geo.crs

<Geographic 2D CRS: EPSG:4326>
Name: WGS 84
Axis Info [ellipsoidal]:
- Lat[north]: Geodetic latitude (degree)
- Lon[east]: Geodetic longitude (degree)
Area of Use:
- name: World.
- bounds: (-180.0, -90.0, 180.0, 90.0)
Datum: World Geodetic System 1984 ensemble
- Ellipsoid: WGS 84
- Prime Meridian: Greenwich


import plotly.graph_objects as go

fig = go.Figure(go.Choroplethmapbox(geojson=df_geo['geometry'].to_json(), 
                                    locations=df_geo['TRACTCE'], 
                                    z=df_geo['ALAND'],
                                    colorscale="Viridis", 
                                    zmin=df_geo['ALAND'].min(), 
                                    zmax=df_geo['ALAND'].max(), 
                                    marker_line_width=0))

fig.update_layout(mapbox_style="light", 
                  mapbox_accesstoken=token,
                  mapbox_zoom=3, 
                  mapbox_center = {"lat": 37.0902, "lon": -95.7129},
                  margin={"r":0,"t":0,"l":0,"b":0})

fig.update_layout()
fig.show()

The colored polygons are missing from the map. I get this error in the browser console:

Uncaught (in promise) Error: Unexpected error while fetching from {"type": "FeatureCollection", "features": [{"id": "0", "type": "Feature", "properties": {}, "geometry": {"type": "Polygon", "coordinates": [[[-81.375782, 28.411135], [-81.372696, 28.421524], [-81.368127, 28.43621], [-81.366996, 28.440684], [-81.366866, 28.445807], [-81.364976, 28.4458], [-81.361445, 28.445845], [-81.358309, 28.446668], [-81.350651, 28.450405], [-81.351092, 28.449687], [-81.349923, 28.449939],

I also tried referencing a different file from the documentation [1] and I still get the same error.

[1] https://plotly.com/python/mapbox-county-choropleth/

Answer 1

As I understand it, the example in the official reference uses FIPS, so no fueatureidkey is needed, but if you use a different geojson, you need to set up a key that associates the geojson with the user data. We have not verified to the content of the polygon information, but we have confirmed that a specific region is depicted when the map is zoomed in.

from urllib.request import urlopen
import json
import geopandas as gpd
import plotly.graph_objects as go

url = 'https://raw.githubusercontent.com/uscensusgeo.geojson'

with urlopen(url) as response:
    geo_json = json.load(response)

df_geo = gpd.read_file(url)

mapbox_access_token = open("mapbox_api_key.txt").read()

fig = go.Figure(go.Choroplethmapbox(geojson=geo_json,
                                    locations=df_geo['TRACTCE'], 
                                    z=df_geo['ALAND'],
                                    featureidkey='properties.TRACTCE',
                                    colorscale="Viridis", 
                                    zmin=df_geo['ALAND'].min(), 
                                    zmax=df_geo['ALAND'].max(), 
                                    marker_line_width=0))

fig.update_layout(mapbox_style="light", 
                  mapbox_accesstoken=mapbox_access_token,
                  mapbox_zoom=3, 
                  mapbox_center = {"lat": 37.0902, "lon": -95.7129},
                  margin={"r":0,"t":0,"l":0,"b":0})

fig.update_layout()
fig.show()