Back to Demo
Altair Visualization Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Altair Visualization</title>
    <link rel="icon" type="image/png" href="../../../favicon.png">
    <script defer src="../../../pyscript/pyscript.js"></script>
</head>
<body>
<py-config src="../py_config.local.toml">
    packages=[
    "altair",
    "pandas",
    "vega_datasets"
    ]
</py-config>
<div id="altair" style="width: 100%; height: 100%"></div>
<py-script output="altair">
        import altair as alt
        from vega_datasets import data

        source = data.movies.url

        pts = alt.selection(type="single", encodings=['x'])

        rect = alt.Chart(data.movies.url).mark_rect().encode(
            alt.X('IMDB_Rating:Q', bin=True),
            alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
            alt.Color('count()',
                      scale=alt.Scale(scheme='greenblue'),
                      legend=alt.Legend(title='Total Records')
                      )
        )

        circ = rect.mark_point().encode(
            alt.ColorValue('grey'),
            alt.Size('count()',
                     legend=alt.Legend(title='Records in Selection')
                     )
        ).transform_filter(
            pts
        )

        bar = alt.Chart(source).mark_bar().encode(
            x='Major_Genre:N',
            y='count()',
            color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
        ).properties(
            width=550,
            height=200
        ).add_selection(pts)

        alt.vconcat(
            rect + circ,
            bar
        ).resolve_legend(
            color="independent",
            size="independent"
        )
</py-script>
</body>
</html>