pyscript-d3.html example

pyscript-d3.html example

by seo gyeongseok

HTML

<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 =...