Altair: share axis within a concat chart for interactivity

[mattijn]

I've the following reproducible python code that present my issue:

import altair as alt

# some data
df_url = 'https://raw.githubusercontent.com/mattijn/datasets/master/comb_chart_interactive.json'
states = ['ParkerenKw', 'HorizontaalOpenen', 'Spuien', 'Opdrijven', 'Keren', 'AfzinkenBodem', 'AfzinkenCPSE', 'HorizontaalSluiten', 'Paraat', 'Stremmen', 'Alert', 'Gemobiliseerd', 'Rust']

# charting
top = alt.Chart(df_url).mark_line().encode(
  x = alt.X('index:T', timeUnit = 'yearmonthdatehoursminutes', title = None),
  y = alt.Y('value:Q', title = 'waterlevel [m+NAP]'),
  color = alt.Color('location:N'),
  tooltip = ['state:O', 'comp1:O', 'comp2:O', alt.Tooltip('index:T', format = '%Y-%m-%d %H:%M')]
).properties(
  title = 'Q3_H5_U5_D1 Failuremodus - 0'
).interactive(bind_y = False)

bottom = alt.Chart(df_url).mark_line().encode(
  x = alt.X('index:T', timeUnit = 'yearmonthdatehoursminutes', title = None),
  y = alt.Y('state:O', sort = states),
  order = alt.Order('index:T'),
  tooltip = ['state:O', 'comp1:O', 'comp2:O', alt.Tooltip('index:T', format = '%Y-%m-%d %H:%M')]
).interactive(bind_y = False)

chart = (top & bottom).configure_legend(labelLimit = 0).configure_axisY(grid=True)
chart

Since the 'VConcatChart' object has no attribute 'interactive' I have to add the interactivity on the Chart object, but this keeps me from combined zoom options.

I would like the zoom capability connected, so when zooming in the bottom chart the top chart will zoom to the same extent (and vice versa).

But currently I am only capable of including zoom options on the chart separately.
Any hints or suggestions are much appreciated!

[jakevdp]

The .interactive() method is a convenience routine that adds an interval selection that is bound to the scales (see the source here). If you want to do something more fancy than basic interaction, it's possible to create and use such a selection directly.

In this case, the solution is to create a single interval selection bound to scales, and add that selection object to each chart:

import altair as alt

zoom = alt.selection_interval(bind='scales', encodings=['x'])

# some data
df_url = 'https://raw.githubusercontent.com/mattijn/datasets/master/comb_chart_interactive.json'
states = ['ParkerenKw', 'HorizontaalOpenen', 'Spuien', 'Opdrijven', 'Keren', 'AfzinkenBodem', 'AfzinkenCPSE', 'HorizontaalSluiten', 'Paraat', 'Stremmen', 'Alert', 'Gemobiliseerd', 'Rust']

# charting
top = alt.Chart(df_url).mark_line().encode(
  x = alt.X('index:T', timeUnit = 'yearmonthdatehoursminutes', title = None),
  y = alt.Y('value:Q', title = 'waterlevel [m+NAP]'),
  color = alt.Color('location:N'),
  tooltip = ['state:O', 'comp1:O', 'comp2:O', alt.Tooltip('index:T', format = '%Y-%m-%d %H:%M')]
).properties(
  title = 'Q3_H5_U5_D1 Failuremodus - 0'
).add_selection(zoom)

bottom = alt.Chart(df_url).mark_line().encode(
  x = alt.X('index:T', timeUnit = 'yearmonthdatehoursminutes', title = None),
  y = alt.Y('state:O', sort = states),
  order = alt.Order('index:T'),
  tooltip = ['state:O', 'comp1:O', 'comp2:O', alt.Tooltip('index:T', format = '%Y-%m-%d %H:%M')]
).add_selection(zoom)

chart = (top & bottom).configure_legend(labelLimit = 0).configure_axisY(grid=True)
chart

[jakevdp]

More about interval selections & binding here: https://altair-viz.github.io/user_guide/interactions.html#interval-selections

[jakevdp]

A useful feature might be to add an interactive() method to concatenated charts that does this automatically, though we'd have to be careful about the implementation (e.g. what happens if you call interactive and then add more subcharts? What if subcharts are already interactive?)

[mattijn]

Thanks for the answer and links regarding documentation interval selections!