105 lines
2.8 KiB
HTML
105 lines
2.8 KiB
HTML
<!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" />
|
|
<style>
|
|
* {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
|
sans-serif;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
|
|
<title>D3 mit JavaScript</title>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<div style="text-align: center; height: 24px">JavaScript</div>
|
|
<div id="js" 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>
|
|
|
|
<script type="module">
|
|
import * as d3 from "https://cdn.skypack.dev/d3@7";
|
|
const url = "https://duolingo.checksch.de/duo_user_info.json";
|
|
|
|
fetch(url)
|
|
.then((res) => res.json())
|
|
.then((out) => {
|
|
const langInfo = out.lang_data;
|
|
|
|
let langInfoPrepped = [];
|
|
Object.entries(langInfo).forEach((el) => {
|
|
let item = {};
|
|
item["name"] = el[1].learningLanguage;
|
|
item["count"] = el[1].xp;
|
|
|
|
// Filter irrelevant items
|
|
if (item["count"] > 500) {
|
|
langInfoPrepped.push(item);
|
|
}
|
|
});
|
|
|
|
const fn = (d) => d.count;
|
|
const data = d3.pie().value(fn)(langInfoPrepped);
|
|
|
|
const arc = d3
|
|
.arc()
|
|
.innerRadius(210)
|
|
.outerRadius(310)
|
|
.padRadius(300)
|
|
.padAngle(2 / 300)
|
|
.cornerRadius(8);
|
|
|
|
const js = d3.select("#js");
|
|
js.select(".loading").remove();
|
|
|
|
const svg = js
|
|
.append("svg")
|
|
.attr("viewBox", "-320 -320 640 640")
|
|
.attr("width", "400")
|
|
.attr("height", "400");
|
|
|
|
for (const d of data) {
|
|
svg.append("path").style("fill", "rebeccapurple").attr("d", arc(d));
|
|
|
|
const text = svg
|
|
.append("text")
|
|
.style("fill", "white")
|
|
.attr("transform", `translate(${arc.centroid(d).join(",")})`)
|
|
.attr("text-anchor", "middle");
|
|
|
|
text
|
|
.append("tspan")
|
|
.style("font-size", "24")
|
|
.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));
|
|
</script>
|
|
</body>
|
|
</html>
|