Interactive Chart with Cross-Highlight#
This example shows an interactive chart where selections in one portion ofthe chart affect what is shown in other panels. Click on the bar chart tosee a detail of the distribution in the upper panel.
importaltairasaltfromvega_datasetsimportdatasource=data.movies.urlpts=alt.selection_point(encodings=['x'])rect=alt.Chart(data.movies.url).mark_rect().encode(alt.X('IMDB_Rating:Q').bin(),alt.Y('Rotten_Tomatoes_Rating:Q').bin(),alt.Color('count()').scale(scheme='greenblue').title('Total Records'))circ=rect.mark_point().encode(alt.ColorValue('grey'),alt.Size('count()').title('Records in Selection')).transform_filter(pts)bar=alt.Chart(source,width=550,height=200).mark_bar().encode(x='Major_Genre:N',y='count()',color=alt.when(pts).then(alt.ColorValue("steelblue")).otherwise(alt.ColorValue("grey"))).add_params(pts)alt.vconcat(rect+circ,bar).resolve_legend(color="independent",size="independent")
importaltairasaltfromvega_datasetsimportdatasource=data.movies.urlpts=alt.selection_point(encodings=['x'])rect=alt.Chart(data.movies.url).mark_rect().encode(alt.X('IMDB_Rating:Q',bin=True),alt.Y('Rotten_Tomatoes_Rating:Q',bin=True),alt.Color('count()',scale=alt.Scale(scheme='greenblue'),legend=alt.Legend(title='Total Records')))circ=rect.mark_point().encode(alt.ColorValue('grey'),alt.Size('count()',legend=alt.Legend(title='Records in Selection'))).transform_filter(pts)bar=alt.Chart(source).mark_bar().encode(x='Major_Genre:N',y='count()',color=alt.when(pts).then(alt.ColorValue("steelblue")).otherwise(alt.ColorValue("grey"))).properties(width=550,height=200).add_params(pts)alt.vconcat(rect+circ,bar).resolve_legend(color="independent",size="independent")