Search code examples
pythontime-seriesdata-visualizationvega-litealtair

Interval selections in Vega-Lite specifications on mobile browsers

The Altair example gallery contains a nice example of how to use interval selections to create two plots where one allows you to define the scale of the other.

import altair as alt
from vega_datasets import data

source = data.sp500.url

brush = alt.selection(type='interval', encodings=['x'])

base = alt.Chart(source).mark_area().encode(
    x = 'date:T',
    y = 'price:Q'
).properties(
    width=600,
    height=200
)

upper = base.encode(
    alt.X('date:T', scale=alt.Scale(domain=brush))
)

lower = base.properties(
    height=60
).add_selection(brush)

upper & lower

enter image description here

If I embed the resulting specification on a page using vega-embed, I get something that works well on desktop browsers but seems to do little if anything on mobile browsers, where dragging along the graph does not create a selection. I can remove a predefined selection by clicking on it in mobile browsers, but that doesn't achieve much. My question therefore becomes:

Is there any way to create Vega-Lite specifications, preferably in Altair, with interval selections that are intuitive to use on (any of the prevalent) mobile browsers, ideally by allowing users to create selections by dragging along the graph?

Solution

  • No, as of Vega-Lite v4.4 there is no way to make interactions/selections work on mobile. The bug that tracks adding this feature is here: https://github.com/vega/vega-lite/issues/4661