Visual and semantic touchups

basic-example/basic-example.js

@@ -18,6 +18,7 @@ fetch(url)
         Object.entries(langInfo).forEach((el) => {
             let item = {};
             item["name"] = langNames.get(el[1].learningLanguage);
+            item["shortcode"] = el[1].learningLanguage;
             item["count"] = el[1].xp;
 
             // Filter irrelevant items
@@ -28,6 +29,8 @@ fetch(url)
 
         const fn = (d) => d.count;
         const data = d3.pie().value(fn)(langInfoPrepped);
+        const maxVal = d3.max(data, function (d) { return d.value; });
+        const colorScale = d3.scaleLinear().domain([0, maxVal]).range(["#fafafa", "rebeccapurple"]);
 
         const arc = d3
             .arc()
@@ -43,30 +46,29 @@ fetch(url)
         const svg = js
             .append("svg")
             .attr("viewBox", "-320 -320 640 640")
-            .attr("width", "400")
+            .attr("width", 400)
-            .attr("height", "400");
+            .attr("height", 400);
+
+        const imageSize = 42
 
         for (const d of data) {
-            svg.append("path").style("fill", "rebeccapurple").attr("d", arc(d));
+            const tooltip = d.data.name + "\n" + d.value + " XP"
+            svg.append("path").style("fill", colorScale(d.value)).attr("d", arc(d)).append("svg:title").text(tooltip);
 
-            const text = svg
+            const image = svg
-                .append("text")
+                .append("image")
-                .style("fill", "white")
+                .attr("xlink:href", "https://marvinscham.de/assets/img/lang/" + d.data.shortcode + ".png")
+                .attr("x", -1 * imageSize / 2)
+                .attr("y", -1 * imageSize / 2)
+                .attr("width", imageSize)
+                .attr("height", imageSize)
                 .attr("transform", `translate(${arc.centroid(d).join(",")})`)
-                .attr("text-anchor", "middle");
+                .attr("text-anchor", "middle")
 
-            text
+            image
-                .append("tspan")
+                .append("svg:title")
-                .style("font-size", "24")
+                .text(tooltip)
-                .attr("x", "0")
-                .text(d.data.name);
 
-            text
-                .append("tspan")
-                .style("font-size", "18")
-                .attr("x", "0")
-                .attr("dy", "1.3em")
-                .text(d.value);
         }
     })
     .catch((err) => console.log(err));

basic-example/basic-example.py

@@ -1,14 +1,27 @@
 from pyodide import create_proxy, to_js, open_url
 import d3
 import json
+import js
 
 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 = []
 
+lang_names = {
+    "eo": "Esperanto",
+    "en": "Englisch",
+    "ru": "Russisch",
+    "ja": "Japanisch",
+    "es": "Spanisch",
+}
+
 for lang in lang_info:
-    item = dict(name=lang_info[lang]["learningLanguage"], count=lang_info[lang]["xp"])
+    item = {
+        "name": lang_names.get(lang_info[lang]["learningLanguage"]),
+        "shortcode": lang_info[lang]["learningLanguage"],
+        "count": lang_info[lang]["xp"],
+    }
 
     # Filter irrelevant items
     if lang_info[lang]["xp"] > 500:
@@ -16,6 +29,9 @@ for lang in lang_info:
 
 fn = create_proxy(lambda d, *_: d["count"])
 data = d3.pie().value(fn)(to_js(lang_info_prepped))
+max_val = max(lang_info_prepped, key=lambda d: d["count"])["count"]
+color_scale = d3.scaleLinear().domain([0, max_val]).range(["#fafafa", "rebeccapurple"])
+js.console.log(to_js(max_val))
 
 arc = (
     d3.arc()
@@ -32,33 +48,38 @@ py.select(".loading").remove()
 svg = (
     py.append("svg")
     .attr("viewBox", "-320 -320 640 640")
-    .attr("width", "400")
+    .attr("width", 400)
-    .attr("height", "400")
+    .attr("height", 400)
 )
 
+image_size = 42
+
 for d in data:
     d_py = d.to_py()
+    tooltip = d_py["data"]["name"] + "\n" + str(d_py["value"]) + " XP"
 
-    (svg.append("path").style("fill", "rebeccapurple").attr("d", arc(d)))
+    (
+        svg.append("path")
+        .style("fill", color_scale(d_py["value"]))
+        .attr("d", arc(d))
+        .append("svg:title")
+        .text(tooltip)
+    )
 
-    text = (
+    image = (
-        svg.append("text")
+        svg.append("image")
-        .style("fill", "white")
+        .attr(
+            "xlink:href",
+            "https://marvinscham.de/assets/img/lang/"
+            + d_py["data"]["shortcode"]
+            + ".png",
+        )
+        .attr("x", -1 * image_size / 2)
+        .attr("y", -1 * image_size / 2)
+        .attr("width", image_size)
+        .attr("height", image_size)
         .attr("transform", f"translate({arc.centroid(d).join(',')})")
         .attr("text-anchor", "middle")
     )
 
-    (
+    (image.append("svg:title").text(tooltip))
-        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"])
-    )