:orphan: :html_theme.sidebar_secondary.remove: .. This document is auto-generated by the altair-gallery extension. Do not modify directly. .. _gallery_scatter_linked_table: Brushing Scatter Plot to Show Data on a Table --------------------------------------------- A scatter plot of the cars dataset, with data tables for horsepower, MPG, and origin. The tables update to reflect the selection on the scatter plot. .. altair-plot:: :remove-code: import altair as alt from vega_datasets import data source = data.cars() # Brush for selection brush = alt.selection_interval() # Scatter Plot points = alt.Chart(source).mark_point().encode( x='Horsepower:Q', y='Miles_per_Gallon:Q', color=alt.condition(brush, alt.value('steelblue'), alt.value('grey')) ).add_params(brush) # Base chart for data tables ranked_text = alt.Chart(source).mark_text(align='right').encode( y=alt.Y('row_number:O', axis=None) ).transform_filter( brush ).transform_window( row_number='row_number()' ).transform_filter( alt.datum.row_number < 15 ) # Data Tables horsepower = ranked_text.encode(text='Horsepower:N').properties( title=alt.Title(text='Horsepower', align='right') ) mpg = ranked_text.encode(text='Miles_per_Gallon:N').properties( title=alt.Title(text='MPG', align='right') ) origin = ranked_text.encode(text='Origin:N').properties( title=alt.Title(text='Origin', align='right') ) text = alt.hconcat(horsepower, mpg, origin) # Combine data tables # Build chart alt.hconcat( points, text ).resolve_legend( color="independent" ).configure_view( stroke=None ) .. tab-set:: .. tab-item:: Method syntax :sync: method .. code:: python import altair as alt from vega_datasets import data source = data.cars() # Brush for selection brush = alt.selection_interval() # Scatter Plot points = alt.Chart(source).mark_point().encode( x='Horsepower:Q', y='Miles_per_Gallon:Q', color=alt.condition(brush, alt.value('steelblue'), alt.value('grey')) ).add_params(brush) # Base chart for data tables ranked_text = alt.Chart(source).mark_text(align='right').encode( y=alt.Y('row_number:O').axis(None) ).transform_filter( brush ).transform_window( row_number='row_number()' ).transform_filter( alt.datum.row_number < 15 ) # Data Tables horsepower = ranked_text.encode(text='Horsepower:N').properties( title=alt.Title(text='Horsepower', align='right') ) mpg = ranked_text.encode(text='Miles_per_Gallon:N').properties( title=alt.Title(text='MPG', align='right') ) origin = ranked_text.encode(text='Origin:N').properties( title=alt.Title(text='Origin', align='right') ) text = alt.hconcat(horsepower, mpg, origin) # Combine data tables # Build chart alt.hconcat( points, text ).resolve_legend( color="independent" ).configure_view( stroke=None ) .. tab-item:: Attribute syntax :sync: attribute .. code:: python import altair as alt from vega_datasets import data source = data.cars() # Brush for selection brush = alt.selection_interval() # Scatter Plot points = alt.Chart(source).mark_point().encode( x='Horsepower:Q', y='Miles_per_Gallon:Q', color=alt.condition(brush, alt.value('steelblue'), alt.value('grey')) ).add_params(brush) # Base chart for data tables ranked_text = alt.Chart(source).mark_text(align='right').encode( y=alt.Y('row_number:O', axis=None) ).transform_filter( brush ).transform_window( row_number='row_number()' ).transform_filter( alt.datum.row_number < 15 ) # Data Tables horsepower = ranked_text.encode(text='Horsepower:N').properties( title=alt.Title(text='Horsepower', align='right') ) mpg = ranked_text.encode(text='Miles_per_Gallon:N').properties( title=alt.Title(text='MPG', align='right') ) origin = ranked_text.encode(text='Origin:N').properties( title=alt.Title(text='Origin', align='right') ) text = alt.hconcat(horsepower, mpg, origin) # Combine data tables # Build chart alt.hconcat( points, text ).resolve_legend( color="independent" ).configure_view( stroke=None )