Added basic example
This commit is contained in:
15
basic-example/README.md
Normal file
15
basic-example/README.md
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
# Grundlegendes Beispiel
|
||||||
|
|
||||||
|
_Für Kapitel 3.3_
|
||||||
|
|
||||||
|
[D3](https://d3js.org/) ist eine JavaScript-Bibliothek zur Datendarstellung.
|
||||||
|
|
||||||
|
In `javascript.html` und `pyscript.html` wird dargestellt, wie Daten für die Verwendung in D3 jeweils mit JavaScript und PyScript von einer externen Quelle in JSON-Form bezogen mithilfe von D3 in die Seite eingebettet werden.
|
||||||
|
|
||||||
|
Die Darstellungen sollten exakt gleich aussehen.
|
||||||
|
|
||||||
|
## Notizen/Hinweise
|
||||||
|
|
||||||
|
`pyscript.py` in diesem Ordner wird nicht direkt verwendet, sondern ist nur eine Kopie des Skriptes aus `pyscript.js` und dient nur dem Zweck einer besser lesbaren Darstellung in gängigen Editoren und auf GitHub.
|
||||||
|
|
||||||
|
Der Kommentar `<!-- prettier-ignore -->` verhindert, dass mein verwendeter Formatter Prettier den Inhalt `py-script`-Tags staucht und damit unbrauchbar macht.
|
||||||
179
basic-example/base.html
Normal file
179
basic-example/base.html
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>d3: JavaScript & PyScript visualizations side-by-side</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
|
||||||
|
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.loading {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 50%;
|
||||||
|
border-top-color: black;
|
||||||
|
animation: spin 1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<b>
|
||||||
|
Based on
|
||||||
|
<i
|
||||||
|
><a
|
||||||
|
href="https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3>"
|
||||||
|
>Learn D3: Shapes</a
|
||||||
|
></i
|
||||||
|
>
|
||||||
|
tutorial.
|
||||||
|
</b>
|
||||||
|
<div style="display: flex; flex-direction: row">
|
||||||
|
<div>
|
||||||
|
<div style="text-align: center">JavaScript version</div>
|
||||||
|
<div id="js" style="width: 400px; height: 400px">
|
||||||
|
<div class="loading"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="text-align: center">PyScript version</div>
|
||||||
|
<div id="py" style="width: 400px; height: 400px">
|
||||||
|
<div class="loading"></div>
|
||||||
|
</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 fruits = [
|
||||||
|
{ name: '🍊', count: 21 },
|
||||||
|
{ name: '🍇', count: 13 },
|
||||||
|
{ name: '🍏', count: 8 },
|
||||||
|
{ name: '🍌', count: 5 },
|
||||||
|
{ name: '🍐', count: 3 },
|
||||||
|
{ name: '🍋', count: 2 },
|
||||||
|
{ name: '🍎', count: 1 },
|
||||||
|
{ name: '🍉', count: 1 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const fn = (d) => d.count;
|
||||||
|
const data = d3.pie().value(fn)(fruits);
|
||||||
|
|
||||||
|
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', 'steelblue').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);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
<py-script>
|
||||||
|
from pyodide import create_proxy, to_js
|
||||||
|
import d3
|
||||||
|
|
||||||
|
fruits = [
|
||||||
|
dict(name="🍊", count=21),
|
||||||
|
dict(name="🍇", count=13),
|
||||||
|
dict(name="🍏", count=8),
|
||||||
|
dict(name="🍌", count=5),
|
||||||
|
dict(name="🍐", count=3),
|
||||||
|
dict(name="🍋", count=2),
|
||||||
|
dict(name="🍎", count=1),
|
||||||
|
dict(name="🍉", count=1),
|
||||||
|
]
|
||||||
|
|
||||||
|
fn = create_proxy(lambda d, *_: d["count"])
|
||||||
|
data = d3.pie().value(fn)(to_js(fruits))
|
||||||
|
|
||||||
|
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", "steelblue")
|
||||||
|
.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>
|
||||||
95
basic-example/javascript.html
Normal file
95
basic-example/javascript.html
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<!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>
|
||||||
97
basic-example/pyscript.html
Normal file
97
basic-example/pyscript.html
Normal file
@@ -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>
|
||||||
63
basic-example/pyscript.py
Normal file
63
basic-example/pyscript.py
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
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"])
|
||||||
|
)
|
||||||
Reference in New Issue
Block a user