Add altair, matplotlib and folium examples

2022-05-01 19:47:48 +03:00 · 2022-04-21 00:22:29 +02:00
parent 0b6fe08663
commit cbf74c7572
3 changed files with 159 additions and 0 deletions
--- a/pyscriptjs/examples/altair.html
+++ b/pyscriptjs/examples/altair.html
@@ -0,0 +1,60 @@
+<html>
+  <head>
+    <title>Altair</title>
+    <meta charset="utf-8">
+
+    <link rel="stylesheet" href="../build/pyscript.css" />
+    <script defer src="../build/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>