Added basic example

2022-07-29 23:35:02 +02:00
parent e98266f036
commit 8f26634f9c
5 changed files with 449 additions and 0 deletions
--- a/basic-example/pyscript.html
+++ b/basic-example/pyscript.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="../assets/favicon.png" />
+
+    <link rel="stylesheet" href="../assets/pyscript.css" />
+    <script defer src="../assets/pyscript.js"></script>
+
+    <title>D3 mit PyScript</title>
+  </head>
+  <body>
+    <div>
+      <div style="text-align: center">PyScript</div>
+      <div id="py" style="width: 400px; height: 400px; margin: auto">
+        <div class="loading"></div>
+      </div>
+    </div>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "d3": "https://cdn.skypack.dev/d3@7"
+        }
+      }
+    </script>
+
+    <!-- prettier-ignore -->
+    <py-script>
+        from pyodide import create_proxy, to_js, open_url
+        import d3
+        import json
+        
+        url = f"https://duolingo.checksch.de/duo_user_info.json"
+        res = open_url(url)
+        lang_info = json.loads(res.read())["lang_data"]
+        lang_info_prepped = []
+        
+        for lang in lang_info:
+            item = dict(name=lang_info[lang]["learningLanguage"], count=lang_info[lang]["xp"])
+        
+            if lang_info[lang]["xp"] > 500:
+                lang_info_prepped.append(item)
+        
+        fn = create_proxy(lambda d, *_: d["count"])
+        data = d3.pie().value(fn)(to_js(lang_info_prepped))
+        
+        arc = (
+            d3.arc()
+            .innerRadius(210)
+            .outerRadius(310)
+            .padRadius(300)
+            .padAngle(2 / 300)
+            .cornerRadius(8)
+        )
+        
+        py = d3.select("#py")
+        py.select(".loading").remove()
+        
+        svg = (
+            py.append("svg")
+            .attr("viewBox", "-320 -320 640 640")
+            .attr("width", "400")
+            .attr("height", "400")
+        )
+        
+        for d in data:
+            d_py = d.to_py()
+        
+            (svg.append("path").style("fill", "rebeccapurple").attr("d", arc(d)))
+        
+            text = (
+                svg.append("text")
+                .style("fill", "white")
+                .attr("transform", f"translate({arc.centroid(d).join(',')})")
+                .attr("text-anchor", "middle")
+            )
+        
+            (
+                text.append("tspan")
+                .style("font-size", "24")
+                .attr("x", "0")
+                .text(d_py["data"]["name"])
+            )
+        
+            (
+                text.append("tspan")
+                .style("font-size", "18")
+                .attr("x", "0")
+                .attr("dy", "1.3em")
+                .text(d_py["value"])
+            )
+    </py-script>
+  </body>
+</html>