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

Added basic example

Browse Source
This commit is contained in:
Marvin Scham
2022-07-29 23:35:02 +02:00
parent e98266f036
commit 8f26634f9c
5 changed files with 449 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
basic-example/base.html Normal file
View 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>