A drop-down menu is an interactive control that reveals selectable options. In data visualization, it lets audiences explore alternatives while keeping the chart’s main message focused. section 8.4 section 8.4.3
Build a drop-down menu in Altair through four connected steps:
- Create a binding_select() object containing the available values. section 8.4.3
- Create a selection_point() object to govern the menu-chart interaction. section 8.4.3
- Attach the selection to the chart with add_params(). section 8.4.3
- Use transform_filter() to display only the selected data. section 8.4.3
Keep the story focused
A chart that lets viewers choose any reference country supports exploration but lacks a clear focus. A stronger design keeps North America static and lets viewers select another country for comparison. section 8.4 section 8.4.4
Listing 8.6 Setting a drop-down menu
import pandas as pd
import altair as alt
df = pd.read_csv('data/population.csv')
# [...]
color = '#80C11E'
input_dropdown = alt.binding_select(options=df['Country Name'].unique())
select_country = alt.selection_point(name='Select',fields=['Country Name'], bind=input_dropdown, value=[{'Country Name': 'Africa Eastern and Southern'}])
# Create visualization
chart = alt.Chart(df).mark_line(
color=color
).encode(
y=alt.Y('Population:Q', title=''),
x=alt.X('Year:O'),
).add_params(
select_country
).transform_filter(
select_country
)
# [...]
chart.save('dropdown.html')
Inspect the complete Altair pattern using population data, a selectable country list, a default value, and filtered line-chart output. section 8.4.3
