
: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 altair.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.when(brush).then(alt.value("steelblue")).otherwise(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 altair.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.when(brush).then(alt.value("steelblue")).otherwise(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 altair.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.when(brush).then(alt.value("steelblue")).otherwise(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
            )
