"""
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.
"""
# 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(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")
