Files
pyscript/examples/altair.html
Peter W 2a59ff8e68 point examples to /latest instead of /alpha (#624)
* point examples to /unstable instead of /alpha

* Change makefile from alpha to unstable

* unstable -> latest

* Update Makefile

* Update repl.html

Co-authored-by: mariana <marianameireles@protonmail.com>
2022-08-02 13:59:50 -04:00

61 lines
1.4 KiB
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" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-env>
- altair
- pandas
- vega_datasets
</py-env>
</head>
<body>
<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>