On an Altair plot, can you change the location that a selection (e.g. dropdown, radio button) is displayed?

Question

Plotting in Python using Altair: I have 2 charts plotted side-by-side and the right-hand plot includes a drop-down selection menu. By default, the drop-down menu displays on the bottom left of the plot. I would like to move the menu underneath the right-hand plot that it is linked to. I don't see anything in the documentation for selection_single or add_selection that relates to the location of the menu. I'm using the | method to concatenate the plots horizontally.

Simplified example:

Code to generate the above example (let me know if there are any issues accessing the data source! There shouldn't be any restrictions.):

# Load the data
url = 'https://data.cityofnewyork.us/api/views/vfnx-vebw/rows.csv'
squirrel_data = pd.read_csv(url, usecols = ['Unique Squirrel ID', 'Hectare', 'Shift', 'Date','Hectare Squirrel Number'])
# source (data): https://catalog.data.gov/dataset/2018-central-park-squirrel-census-hectare-data

# Wrangle data
squirrel_data_group_shift = squirrel_data[['Hectare', 'Unique_Squirrel_ID', 'Shift']].groupby(['Hectare','Shift']).count().reset_index().head(30)
squirrel_data_group = squirrel_data[['Hectare', 'Unique_Squirrel_ID']].groupby('Hectare').count().reset_index().head(15)

# Create Dropdown selection
shifts = ['AM','PM']
shift_dropdown = alt.binding_select(options=shifts)
shift_select = alt.selection_single(fields=['Shift'], bind = shift_dropdown)

# Chart 1
shift_chart = (alt.Chart(squirrel_data_group_shift, title = 'Count by shift')
           .mark_bar()
           .add_selection(shift_select)
           .encode(
               alt.X('Hectare:N'), 
               alt.Y('Unique_Squirrel_ID'))
              .transform_filter(shift_select))

# Chart 2
count_chart = (alt.Chart(squirrel_data_group, title = 'Total counts')
    .mark_bar()
    .encode(
        alt.X('Hectare:N'),
        alt.Y('Unique_Squirrel_ID:Q')))

# Plot side-by-side  
count_chart | shift_chart

Answer 1

It is not easy to change the location within Altair.

The way to control the location of the input element is to set the element argument of alt.selection_single to a CSS selector string for the container on the page in which you would like the element to appear. By default, it appears in the same container as the chart.

If you would like to modify the location of the element within the default container location, you can use CSS styles/properties; for example, you could add this style tag to the page where the chart is being displayed:

<style>
.vega-bind {
  text-align:right;
}
</style>

If you are displaying charts in a Jupyter notebook, you can do something like this (tested in JupyterLab):

import altair as alt
from vega_datasets import data

input_dropdown = alt.binding_select(options=['Europe','Japan','USA'])
selection = alt.selection_single(fields=['Origin'], bind=input_dropdown)

chart = alt.Chart(data.cars.url).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color = alt.condition(selection, 'Origin:N', alt.value('lightgray')),
    tooltip='Name:N'
).add_selection(
    selection
)

from IPython.display import HTML
display(HTML("""
<style>
.vega-bind {
  text-align:right;
}
</style>
"""))
display(chart)