Можно ли на графике Альтаира изменить место отображения выбора (например, раскрывающийся список, переключатель)?

Построение на Python с использованием Altair: у меня есть две диаграммы, построенные бок о бок, а правый график включает раскрывающееся меню выбора. По умолчанию раскрывающееся меню отображается в нижнем левом углу графика. Я хотел бы переместить меню под правый график, с которым оно связано. Я не вижу в документации для selection_single или add_selection ничего, что связано с расположением меню. Я использую метод | для объединения графиков по горизонтали.

Упрощенный пример:

параллельные участки

Код для создания приведенного выше примера (дайте мне знать, есть ли проблемы с доступом к источнику данных! Никаких ограничений быть не должно):

# 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

python drop-down-menu selection altair
person Cari    schedule 25.11.2019    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Поменять месторасположение в пределах Альтаира непросто.

Чтобы контролировать расположение элемента ввода, нужно установить в качестве аргумента element параметра alt.selection_single строку селектора CSS для контейнера на странице, на которой должен отображаться элемент. По умолчанию он отображается в том же контейнере, что и диаграмма.

Если вы хотите изменить расположение элемента в местоположении контейнера по умолчанию, вы можете использовать стили / свойства CSS; например, вы можете добавить этот тег стиля на страницу, где отображается диаграмма:

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

Если вы отображаете диаграммы в записной книжке Jupyter, вы можете сделать что-то вроде этого (проверено в 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)

введите здесь описание изображения

person jakevdp    schedule 25.11.2019
comment
Спасибо! Я подумал, что это было нелегко. Я ценю ответ, это именно то, что я ищу. - person Cari; 25.11.2019