.. 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::
    :code-below:

    

    import altair as alt
    from vega_datasets import data

    source = data.cars()

    # Brush for selection
    brush = alt.selection(type='interval')

    # Scatter Plot
    points = alt.Chart(source).mark_point().encode(
        x='Horsepower:Q',
        y='Miles_per_Gallon:Q',
        color=alt.condition(brush, 'Cylinders:O', alt.value('grey'))
    ).add_selection(brush)

    # Base chart for data tables
    ranked_text = alt.Chart(source).mark_text().encode(
        y=alt.Y('row_number:O',axis=None)
    ).transform_window(
        row_number='row_number()'
    ).transform_filter(
        brush
    ).transform_window(
        rank='rank(row_number)'
    ).transform_filter(
        alt.datum.rank<20
    )

    # Data Tables
    horsepower = ranked_text.encode(text='Horsepower:N').properties(title='Horsepower')
    mpg = ranked_text.encode(text='Miles_per_Gallon:N').properties(title='MPG')
    origin = ranked_text.encode(text='Origin:N').properties(title='Origin')
    text = alt.hconcat(horsepower, mpg, origin) # Combine data tables

    # Build chart
    alt.hconcat(
        points,
        text
    ).resolve_legend(
        color="independent"
    )


.. toctree::
   :hidden: