How to render all features with matching properties in choropleth map?

📊 Plotly Python
1

The American Radio Relay League has organized the United States into districts and sections. Districts contain multiple sections. Sections are defined by the states or counties which are included within them. I have a GeoJSON file which is a feature collection where each feature represents a section. The feature properties contain other keys like “district”. Example: the Alaska Section and the Western Washington Section (among others) are part of the Northwestern District, so the features for both sections include a “district” property equal to “Northwestern”.

I have a list of contacts from a recent event where the exchange was the operator’s class and section. I have code which renders a choropleth map with each section referenced in the contacts and a color representing the number of contacts made with operators from that section. Here’s what it looks like:

Screenshot 2024-07-09 at 16.52.05
Screenshot 2024-07-09 at 16.52.051658×1292 151 KB

I am now trying to change the code to use a dropdown to select between “Section” and “District”. When I select “District”, only one of the sections is rendered for each district (in this case, Alaska), with the color for correct total value for the district. Here’s what it looks like:

Screenshot 2024-07-09 at 16.54.47
Screenshot 2024-07-09 at 16.54.471658×1292 167 KB

What I want to see when selecting “District” is all the features for each district with the district-wide color value. I expected to see Western Washington (and Oregon, and the other sections that are in the district) all with the same color.

Here’s the code that does the work:

@callback(
    Output("map-content", "figure"),
    Input("area-dropdown", "value"),
)
def update_map(area_dropdown):
    region_counts = (
        df.groupby([area_dropdown], observed=False)
        .size()
        .reset_index(name="Count")
    )
    print(region_counts)
    feature_keys={"Section": "abbreviation", "District": "district", "Call Area": "callarea"}
    map_content = px.choropleth(
        region_counts,
        geojson=geojson,
        locations=area_dropdown,
        color="Count",
        featureidkey=f"properties.{feature_keys[area_dropdown]}",
        projection="mercator",
        basemap_visible=True,
        width=1024,
        height=768
    )

    return map_content

Here is the definition of area_dropdown:

                    dcc.Dropdown(
                        id="area-dropdown",
                        options={
                            "Section": "Section",
                            "District": "District",
                            "Call Area": "Call Area",
                        },
                        value="Section",
                        clearable=False,
                        searchable=False,
                    )

“Call Area” is like “District”, if this works for one it will work for the other.

What am I missing? Thank you in advance.

2

Not totally sure, but think it may be because the output from your df.groupby has only one record per district, and px.choropleth may not be doing a proper join back to the geojson.

Maybe try adding something like this to get the record count back to len(df)…

region_counts = region_counts.merge(df, on=area_dropdown, validate="1:m")
1 Like
3

Oh, the output definitely has one record per district — but your suggestion has inspired me to explore a table with per-district subtotals.

I guess I figured that px.choropleth would render all features from the GeoJSON with matching properties instead of just ‘the first one’. Is there a flag for that that I haven’t yet found?

4

I created a minimum working example and posted it to the issues – fingers crossed that it gets addressed soon!