altair: изменить положение ползунка - PullRequest
Новая
       82

altair: изменить положение ползунка

2 голосов
/ 30 мая 2020

Можно ли изменить положение привязки выбора слайдера?

Не удалось найти что-то в документации altair или в документации vega-lite (https://vega.github.io/vega-lite/docs/bind.html).

Я хочу переместить ползунок года вверх, ближе к основному графику рассеивания:
https://vizsim.github.io/pkws_in_D/kba_neuzl_umwelt_fz14_v01.html

enter image description here

1 Ответ

3 голосов
/ 30 мая 2020

Единственный способ отрегулировать положение ползунка в выводе Altair / Vega-Lite - использовать CSS. Если вы выводите HTML напрямую, вы можете добавить CSS в файл HTML. Если вы отображаете диаграмму Альтаира в блокноте Jupyter, вы можете использовать модуль IPython.display , чтобы добавить соответствующий CSS.

Например, вот US График численности населения во времени с ползунком, перемещенным в верхний правый угол: 

from IPython.display import display, HTML

display(HTML("""
<style>
form.vega-bindings {
  position: absolute;
  right: 0px;
  top: 0px;
}
</style>
"""))

import altair as alt
from vega_datasets import data

source = data.population.url

pink_blue = alt.Scale(domain=('Male', 'Female'),
                      range=["steelblue", "salmon"])

slider = alt.binding_range(min=1900, max=2000, step=10)
select_year = alt.selection_single(name="year", fields=['year'],
                                   bind=slider, init={'year': 2000})

alt.Chart(source).mark_bar().encode(
    x=alt.X('sex:N', title=None),
    y=alt.Y('people:Q', scale=alt.Scale(domain=(0, 12000000))),
    color=alt.Color('sex:N', scale=pink_blue),
    column='age:O'
).properties(
    width=20
).add_selection(
    select_year
).transform_calculate(
    "sex", alt.expr.if_(alt.datum.sex == 1, "Male", "Female")
).transform_filter(
    select_year
).configure_facet(
    spacing=8
)

enter image description here

...