I am trying to dynamically produce a list of charts that I am going to display on a webpage based on a passed in dataframe and list of variables. The master_chart is supposed to have a time element and then interval selections on the master_chart will affect what is “highlighted” or selected on the other produced charts. When I do this, however, the selections on all of the other produced charts work between each other but selections on the master chart are not registered by the other charts. When I changed the x-variable of the other charts to the time element, selections on the master chart worked and changed the color of data points on every other chart and vice versa. However when I change the x encoding to the desired value, any selection on the master chart deselects all points on the secondary chart like so (alright I can't upload a pic because I don't have enough reputation but the link is here https://ibb.co/56LSTwW). I would like it to show me all data from those times on the other graphs but it does not appear to be working. Am I misunderstanding the capabilities of compound altair interval selections. Any ideas would be greatly appreciated.
Post-edit: After editing I reproduced the example with the seattle-weather vega dataset. My goal is to have a set of interactive charts where selections on one chart will highlight datapoints on the other charts. The function returns a list with one chart in it and that list is rendered in a Jinja template on my webpage. I have been able to render many different types of charts on the webpage so I know that my issue is based upon my Altair understanding. When I make selections on any of the three charts with the same Y-axis, it selects points on all of the other graphs including the master_chart like such https://ibb.co/ssDwGZ6. But when I make selections on the top graph, the master_chart, there are no selections on any of the other graphs https://ibb.co/pRwDbF4. Does this have to do with the for-loop construction of the other charts or does it stem from the fact that the master chart has a different encoding for the x and y than the other charts? Any advice would be greatly appreciated.
import altair as alt
import pandas as pd
from vega_datasets import data
var_dframe = data.seattle_weather()
primary_x = "precipitation"
param_list = ["precipitation", "temp_max", "temp_min", "wind"]
def make_charts(var_dframe, primary_x, param_list):
other_charts_list = []
compound_chart_list = []
the_brush = alt.selection(type='interval', resolve='global')
master_chart = alt.Chart(var_dframe).mark_point(filled=True).encode(
x= alt.X("date:T"),
y= primary_x +":Q",
color= alt.condition(the_brush, alt.value('blue'), alt.value('grey'))
).add_selection(the_brush)
for item in (param_list[1:]):
new_chart = alt.Chart(var_dframe).mark_point(
filled=True,
).encode(
x= alt.X("%s:Q" % item),
y= alt.Y("temp_max:Q"),
color = alt.condition(the_brush, alt.value('blue'), alt.value('gray'))
).add_selection(the_brush)
other_charts_list.append(new_chart)
compound_chart = master_chart
for chart in other_charts_list:
compound_chart = compound_chart & chart
compound_chart_list.append(compound_chart.to_json())
return(compound_chart_list)
This strange behavior is due to a known bug in Vega-Lite: Interval selection on temporal data returns empty selection. The workaround is to add a temporal encoding to each chart panel; here you can do this by adding detail="date:T" as an encoding within each new_chart object you create in your code snippet.
Awesome! Thanks so much