Dropdown Menu in Geoshape Chart

Hello,

I’m currently having troubles to integrate a dropdown menu into a geoshape chart with the following code:

source = alt.topo_feature(data.world_110m.url, "countries")

background = alt.Chart(source).mark_geoshape(fill="black")

input_dropdown = alt.binding_select(options=['GISAID','CNCB'])

selection = alt.selection_single(fields=['Community'], bind=input_dropdown, name='Community')

color = alt.condition(selection,
                    alt.Color('Count:N', legend=None),
                    alt.value('lightgray'))
foreground = (
    alt.Chart(source)
    .mark_geoshape(stroke="black", strokeWidth=0.15)
    .encode(
        color=color,
        tooltip=[
            alt.Tooltip("country:N", title="Country"),
            alt.Tooltip("countryID:N", title="ID"),
            alt.Tooltip("Count:Q", title="No. of Submissions"),
        ],
    ).transform_lookup(
        lookup='id',
        from_=alt.LookupData(completeDFLong, key='countryID',
                             fields=['country','countryID','Community','Count'])
    )
    .properties(
    title='Locations of Submissions in selected Community'
).add_selection(
    selection
).transform_filter(
    selection
)
)
final_map = (
    (background + foreground)
    .configure_view(strokeWidth=0)
    .configure_title(
    fontSize=20,
    color='black'
)
    .properties(width=700, height=600)
    .project("naturalEarth1")
    
)
final_map

The structure of the complete Dataframe is as follows:

But unfortunately changing the selection in the dropdown menu doesn’t change the chart. Also coloring doesn’t match the “Count” column:

Is it even possible to use a dropdown menu for a geoshape chart? All examples I found in the documentation were used in mark_point() instead of mark_geoshape()

If yes, how can I make sure that the selected item is passed into the selection variable and subsequently into the color encoding?

Thank you in advance and best regards!

[mattijn]

Think reverse. Lookup the geometry instead of the stats.

.transform_lookup(
    lookup='id',
    from_=alt.LookupData(states, key='id', fields=['geometry', 'type'])
)

In combination with alt.Chart(ds).

Full spec:

import pandas as pd
import altair as alt
from vega_datasets import data
from io import StringIO


datastring = """
Year State Immigrants id
2011 Alabama 4063 1
2011 Alaska 1799 2
2011 Arizona 20333 4
2011 Arkansas 2874 5
2012 Alabama 3873 1
2012 Alaska 1612 2
2012 Arizona 18434 4
2012 Arkansas 2795 5
"""

ds = pd.read_csv(StringIO(datastring), sep=' ')
states = alt.topo_feature(data.us_10m.url, feature='states')

input_dropdown = alt.binding_select(options=list(ds.Year.unique()), name='Year')
# next altair version: from `init={'Year': 2011}` to `value=2011`
selector = alt.selection_single(fields=['Year'], bind=input_dropdown, init={'Year': 2011})

base = alt.Chart(states).mark_geoshape(fill='lightgray', stroke='black', strokeWidth=0.5)

chart = alt.Chart(ds).mark_geoshape(stroke='black').encode(
    color='Immigrants:Q',
    tooltip=['State:N', 'Immigrants:Q'],
).transform_lookup(
    lookup='id',
    from_=alt.LookupData(states, key='id', fields=['geometry', 'type'])
).add_selection(
    selector
).transform_filter(
    selector
).properties(
    width=700,
    height=400,
    projection={'type': 'albersUsa'},
)

(base + chart).configure_view(stroke=None).configure_title(fontSize=20)

[DajanaMuho]

YES, it worked! Thank you very much @joelostblom and @mattijn