"""
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 toreflect the selection on the scatter plot.
"""
# category: scatter plots

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().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().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.mark_text().encode(text='Horsepower:N')
mpg = ranked_text.mark_text().encode(text='Miles_per_Gallon:N')
origin = ranked_text.mark_text().encode(text='Origin:N')

# Assign titles to data tables
horsepower.title = 'Horsepower'
mpg.title = 'MPG'
origin.title = 'Origin'

# Combine data tables
text = alt.hconcat(horsepower, mpg, origin)

# Build chart
alt.hconcat(
    points,
    text,
    data=source
).resolve_legend(
    color="independent"
)
Create brushing scatter plot to show data on a table example
Create brushing scatter plot to show data on a table example
