marvinscham/pa-pyscript
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual and semantic touchups

Browse Source
This commit is contained in:
Marvin Scham
2022-08-23 04:34:16 +02:00
parent 80e5508a99
commit 0528b88c29
2 changed files with 62 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
basic-example/basic-example.js
View File

@@ -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("height", "400");
.attr("width", 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
.append("text")
.style("fill", "white")
const image = svg
.append("image")
.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
.append("tspan")
.style("font-size", "24")
.attr("x", "0")
.text(d.data.name);
image
.append("svg:title")
.text(tooltip)
text
.append("tspan")
.style("font-size", "18")
.attr("x", "0")
.attr("dy", "1.3em")
.text(d.value);
}
})
.catch((err) => console.log(err));

63
basic-example/basic-example.py
View File

@@ -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("height", "400")
.attr("width", 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 = (
svg.append("text")
.style("fill", "white")
image = (
svg.append("image")
.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")
)
(
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"])
)
(image.append("svg:title").text(tooltip))