examples/d3.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/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);
                }
            }
        </style>
    </head>
    <body>
        <nav class="navbar" style="background-color: #000000">
            <div class="app-header">
                <a href="/">
                    <img src="./logo.png" class="logo" />
                </a>
                <a class="title" href="" style="color: #f0ab3c"
                    >Simple d3 visualization</a
                >
            </div>
        </nav>

        <section class="pyscript">
            <py-tutor modules="d3.py">
                <py-config>
                    plugins = [
                      "https://pyscript.net/latest/plugins/python/py_tutor.py"
                    ]
                    [[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>
                </div>
            </div>
            <py-script src="d3.py"></py-script>
        </section>

        <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 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>
    </body>
</html>