mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
170 lines
3.7 KiB
HTML
170 lines
3.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>d3: JavaScript & PyScript visualizations side-by-side</title>
|
|
<meta charset="utf-8">
|
|
|
|
<link rel="stylesheet" href="../build/pyscript.css" />
|
|
<script defer src="../build/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 "d3"
|
|
|
|
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>
|
|
|
|
<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>
|