Plotly Choropleth - How to add outline to shape from geojson

Question

I want to draw an outline highlighting a shape in a Choropleth map drawn from a GeoJSON using Plotly (in my case over Dash).

I have a dataframe "df" like this one:

state (string) value (float) 
STATE_1        50.0
STATE_2        30.5
STATE_3        66.2

I have also a GeoJSON loaded as an object with this structure:

{
    'type': 'FeatureCollection',
    'features': [
        {
            'type': 'Feature',
            'id': 1,
            'properties': {
                'id': 'STATE_1',
            },
            'geometry': {'type': 'Polygon', 'coordinates': [...]},
        },
        ...
    ]
}

I've drawn my base map like this:

fig = px.choropleth(
    df,
    geojson=my_geojson,
    color='value',
    locations='state',
    featureidkey='properties.id',
    projection='Mercator',
)
fig.update_geos(
    fitbounds='locations',
    visible=False,
)
fig.update_layout(
    coloraxis=dict(
        colorbar=dict(
            title='',
            orientation='h',
            x=0.5,
            y=0.1,
            xanchor='center',
            yanchor='top',
        ),
        colorscale=[[0, '#04cc9a'], [1, '#5259ad']],
    ),
    margin={"r": 0, "t": 0, "l": 0, "b": 0},
    dragmode=False,
)

I've tried to add another trace unsuccessfully to show the outline of one of the states. I've tried it both using plotly express and plotly graph objects with no results.

How should I do it?

Samuel O.D. · Accepted Answer · 2024-10-31 12:18:13Z

The strategy that finally worked for me was:

Generate main figure as shown in the question
Generate an auxiliary figure with plotly express. This was necessary to give the new trace its marker and fill color. Otherwise it got replaced by the main figure's configuration.
Add the trace from the axiliary figure to the main one

It would be something like this:

# Create main figure as shown in the question
fig = ...

# Filter data and geojson to create the new trace
df_aux = df[df['state'] == 'STATE_1']
my_filtered_geojson = {...}  # Filter so it has only one Feature, the one corresponding to STATE_1

# Replace value with dummy so we can fill the shape with a transparent color
df_aux ['value'] = 1  

# Create aux figure
fig_aux = go.Figure(go.Choropleth(
    geojson=my_filtered_geojson,
    featureidkey='properties.id',
    locationmode='geojson-id',
    locations=df_aux['state'],
    z=df_aux['value'],  # The dummy value we have just set above
    zmax=1,
    zmin=0,
    colorscale=[[0, 'rgba(0,0,0,0)'], [1, 'rgba(0,0,0,0)']],  # Colors with alpha channel, both fully transparent
    showscale=False,
    marker=dict(
        line=dict(
            color='red',
            width=4,
        )
    ),
    hoverinfo='skip',  # Hide hover info so you still get the main figure's one
))

# Add new trace to the main figure
fig_principal.add_trace(fig_aux.data[0])

After some styling you should be able to get something like this. In my case I'm showing the original choropleth map colors and over it I'm highlighting one of the states in the map in purple. You should also get the hover info of the original map:

Collectives™ on Stack Overflow

Plotly Choropleth - How to add outline to shape from geojson

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related