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/folium.html
+++ b/pyscriptjs/examples/folium.html
@@ -0,0 +1,49 @@
+<html>
+  <head>
+    <title>Folium</title>
+    <meta charset="utf-8">
+
+    <link rel="stylesheet" href="../build/pyscript.css" />
+    <script defer src="../build/pyscript.js"></script>
+    <py-env>
+      - folium
+      - pandas
+    </py-env>
+    </head>
+    <body>
+      <div id="folium" style="width: 100%; height: 100%"></div>
+      <py-script output="folium">
+import folium
+import json
+import pandas as pd
+	
+from pyodide.http import open_url
+
+url = (
+    "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data"
+)
+state_geo = f"{url}/us-states.json"
+state_unemployment = f"{url}/US_Unemployment_Oct2012.csv"
+state_data = pd.read_csv(open_url(state_unemployment))
+geo_json = json.loads(open_url(state_geo).read())
+
+m = folium.Map(location=[48, -102], zoom_start=3)
+
+folium.Choropleth(
+    geo_data=geo_json,
+    name="choropleth",
+    data=state_data,
+    columns=["State", "Unemployment"],
+    key_on="feature.id",
+    fill_color="YlGn",
+    fill_opacity=0.7,
+    line_opacity=0.2,
+    legend_name="Unemployment Rate (%)",
+).add_to(m)
+
+folium.LayerControl().add_to(m)
+
+m
+      </py-script>
+    </body>
+</html>