examples/altair.html

<html>
    <head>
        <title>Altair</title>
        <meta charset="utf-8" />
        <link rel="icon" type="image/x-icon" href="./favicon.png" />
        <link
            rel="stylesheet"
            href="https://pyscript.net/latest/pyscript.css"
        />
        <link rel="stylesheet" href="./assets/css/examples.css" />
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    </head>
    <body>
        <nav class="navbar" style="background-color: #000000">
            <div class="app-header">
                <a href="/">
                    <img src="./logo.png" class="logo" />
                </a>
                <a class="title" href="" style="color: #f0ab3c">Altair</a>
            </div>
        </nav>
        <section class="pyscript">
            <div id="altair"></div>
            <py-tutor>
                <py-config>
                    packages = [
                      "altair",
                      "pandas",
                      "vega_datasets"
                    ]
                    plugins = [
                      "https://pyscript.net/latest/plugins/python/py_tutor.py"
                    ]
                </py-config>
                <py-script>
                    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)

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