96 lines
2.7 KiB
HTML
96 lines
2.7 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" />
|
|
|
|
<script src="../assets/d3.v7.min.js" charset="utf-8"></script>
|
|
<style>
|
|
* {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
|
|
sans-serif;
|
|
}
|
|
</style>
|
|
|
|
<title>D3 mit JavaScript</title>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<div style="text-align: center">JavaScript</div>
|
|
<div id="js" style="width: 400px; height: 400px; margin: auto">
|
|
<div class="loading"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
url = 'https://duolingo.checksch.de/duo_user_info.json';
|
|
|
|
fetch(url)
|
|
.then((res) => res.json())
|
|
.then((out) => {
|
|
const langInfo = out.lang_data;
|
|
|
|
langInfoPrepped = [];
|
|
Object.entries(langInfo).forEach((el) => {
|
|
item = {};
|
|
item['name'] = el[1].learningLanguage;
|
|
item['count'] = el[1].xp;
|
|
|
|
// Filter irrelevant items
|
|
if (item['count'] > 500) {
|
|
langInfoPrepped.push(item);
|
|
}
|
|
});
|
|
console.log(langInfoPrepped);
|
|
|
|
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>
|