Altair: Interaction with slider

Created on 7 Jun 2019  路  5Comments  路  Source: altair-viz/altair

Hi,

I've been playing around with a slider to make my data interactive, comparable with https://altair-viz.github.io/gallery/us_population_over_time.html

I run in a problem though, that the US Population example has too. As soon as one clicks in the figure on a bit of whitespace, the selection is cleared and the graph shows different data. Is there a way to disable the 'on click' event?

Best regards,

Joes

documentation question vega-lite-related

Most helpful comment

Good question - it turns out that if you pass on='none' to the selection object, it will no longer reset when clicked (try chart here):

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'], on='none',
                                   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
)

I think it would be worth updating the docs/examples with this info.

All 5 comments

Good question - it turns out that if you pass on='none' to the selection object, it will no longer reset when clicked (try chart here):

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'], on='none',
                                   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
)

I think it would be worth updating the docs/examples with this info.

Thank you for the quick reply. That seems to work, unless someone decides to double click...

There have been some discussions among the Vega-Lite developers about disabling interactions automatically for bound selections, so this may change in the future.

Ah, it looks like you can disable the double-click behavior by also setting clear='none'.

See https://github.com/vega/vega-lite/issues/4936#issuecomment-489334882 for the Vega-Lite discussion of making this the default.

Perfect, thank you so much for finding that out. Those two settings are the workaround I was looking for!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nielsmde picture nielsmde  路  4Comments

LukeMathWalker picture LukeMathWalker  路  3Comments

HalukaMB picture HalukaMB  路  3Comments

pabloinsente picture pabloinsente  路  3Comments

breadbaron picture breadbaron  路  4Comments