New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Linking the x-axis of multiple charts when zooming #1481
Comments
Yes, but you'll need to learn a bit about binding selections When you do a chart like this: import altair as alt
from vega_datasets import data
cars = data.cars()
alt.Chart(cars).mark_point().encode(
x='Horsepower',
y='Miles_per_Gallon',
color='Origin'
).interactive() The alt.Chart(cars).mark_point().encode(
x='Horsepower',
y='Miles_per_Gallon'
color='Origin'
).add_selection(
alt.selection_interval(bind='scales')
) Each time you call resize = alt.selection_interval(bind='scales')
chart1 = alt.Chart(cars).mark_point().encode(
x='Horsepower',
y='Miles_per_Gallon',
color='Origin'
).add_selection(
resize
)
chart2 = alt.Chart(cars).mark_point().encode(
x='Horsepower',
y='Acceleration',
color='Origin'
).add_selection(
resize
)
alt.concat(chart1, chart2) Because the selection is attached to both charts, changing it will change the scales of both charts. |
Jake, Thank you for the prompt and detailed feedback!!!! -Dave |
I'm going to reopen this as a reminder to myself to add this info to the docs. |
Got it - sorry. (That will be very helpful thing to include!) |
Is it possible to have this work with layered charts as well? Essentially I have:
I would like to have an interactive x-axis that is linked between chartOne and chartTwo. However, I haven't been able to get this to work yet, I keep getting a I have tried, for example:
and
and neither of them seem to work. |
You cannot bind the same selection object to two charts in a layer (this leads to duplicate signal names). Try binding the selection to only one of the subcharts in each layer. |
For example, like this: import altair as alt
import pandas as pd
df = pd.DataFrame({
'x': range(5),
'y': [1, 3, 2, 4, 0]
})
zoom = alt.selection_interval(bind='scales')
layer1 = alt.Chart(df).mark_line().encode(x='x', y='y').add_selection(zoom)
layer2 = alt.Chart(df).mark_point().encode(x='x', y='y')
chartOne = layer1 + layer2 |
Perfect, thank you so much! |
@jakevdp - is it possible to link both x and y axes so they are both synchronized on zooming? |
Yes, the last code snippet you quoted should do this. |
zoom = alt.selection_interval(bind='scales')
selector = alt.selection_single(
empty='all',
fields=['ticker']
)
base = alt.Chart(df).transform_filter(
# slider_selection
(alt.datum.date2 >= select_range_start.date) & (
alt.datum.date2 <= select_range_end.date)
).add_selection(
selector,
select_range_start,
select_range_end
)
bars = base.mark_bar().encode(
# https://stackoverflow.com/questions/52877697/order-bar-chart-in-altair
x=alt.X('ticker',
sort=alt.EncodingSortField(
field="ticker", op="count", order='descending'),
axis=alt.Axis(title='Stock Tickers')
),
y=alt.Y("count(id)",
axis=alt.Axis(title='Number of Mentions'),
# scale=alt.Scale(zero=False)
),
color=alt.condition(selector, 'id:O', alt.value(
'lightgray'), legend=None),
).properties(
width=1400,
height=600
).add_selection(
zoom
) The x axis is just stock tickers. they y axis is count. EDIT: used a slider, selection_single, transform_aggregate, and transform_filter to achieve what I wanted |
Vega-lite currently does not support selections on aggregated fields; see vega/vega-lite#5308. You're using a |
Is there any way to link the x-axis of multiple charts so that all they zoom together and maintain the same x-axis range when one plot is zoomed?
Thanks!
The text was updated successfully, but these errors were encountered: