mirror of
https://github.com/pyscript/pyscript.git
synced 2026-02-21 11:01:26 -05:00
Apply prettier to css, html, js, md, ts, and yml (#1249)
* Apply prettier to css, js, html, md, ts, and yml As a followup I will add prettier to the .pre-commit config. This patch is 100% generated by prettier. I used a forked version of prettier that understands the py-script tag. See https://github.com/hoodmane/pyscript-prettier-precommit for more info. * Apply old pre-commit * Revert some problems * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Revert some changes * More changes * Fix pre-commit * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Hood Chatham
182
examples/d3.html
182
examples/d3.html
@@ -1,44 +1,45 @@
|
||||
<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">
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||
|
||||
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
<script src="https://d3js.org/d3.v7.min.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);
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000;">
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c;">Simple d3 visualization</a>
|
||||
<a class="title" href="" style="color: #f0ab3c"
|
||||
>Simple d3 visualization</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="pyscript">
|
||||
<py-tutor modules="d3.py">
|
||||
<section class="pyscript">
|
||||
<py-tutor modules="d3.py">
|
||||
<py-config>
|
||||
plugins = [
|
||||
"../build/plugins/python/py_tutor.py"
|
||||
@@ -46,79 +47,88 @@
|
||||
[[fetch]]
|
||||
files = ["./d3.py"]
|
||||
</py-config>
|
||||
</py-tutor>
|
||||
<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>
|
||||
</py-tutor>
|
||||
<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>
|
||||
<py-script src="d3.py"></py-script>
|
||||
</section>
|
||||
<div>
|
||||
<div style="text-align: center">PyScript version</div>
|
||||
<div id="py" style="width: 400px; height: 400px">
|
||||
<div class="loading"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<py-script src="d3.py"></py-script>
|
||||
</section>
|
||||
|
||||
<script type="module">
|
||||
<script type="module">
|
||||
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 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 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 arc = d3.arc()
|
||||
.innerRadius(210)
|
||||
.outerRadius(310)
|
||||
.padRadius(300)
|
||||
.padAngle(2 / 300)
|
||||
.cornerRadius(8)
|
||||
const js = d3.select("#js");
|
||||
js.select(".loading").remove();
|
||||
|
||||
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");
|
||||
|
||||
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));
|
||||
|
||||
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");
|
||||
|
||||
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", "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)
|
||||
}
|
||||
text
|
||||
.append("tspan")
|
||||
.style("font-size", "18")
|
||||
.attr("x", "0")
|
||||
.attr("dy", "1.3em")
|
||||
.text(d.value);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user