问题
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
回答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)
来源:https://stackoverflow.com/questions/59025953/on-an-altair-plot-can-you-change-the-location-that-a-selection-e-g-dropdown