JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="https://d3js.org/d3.v6.min.js"></script>
    <svg width="300" height="300">
    </svg>
    <input type="range" min="0" max="6.28" step="0.01" value="0">

JavaScript

const wArc = 0.5;
        const svg = d3.select("svg")
            .append("g")
            .attr("transform", "translate(150,100)");
        // Create background arc
        const bgArc = d3.arc()
            .innerRadius(80)
            .outerRadius(85)
            .startAngle(0)
            .endAngle(Math.PI);

        svg.append("path")
            .attr("class", "bg-arc")
            .attr("d", bgArc)
            .attr("fill", "lightgrey");

        function update(start) {
            // Create sliding arc
            const arc = d3.arc()
                .innerRadius(80)
                .outerRadius(85)
                .startAngle(start)
                .endAngle(start + wArc);

            svg.append("path")
                .attr("class", "arc")
                .attr("d", arc)
                .attr("fill", "green");

        }
        update(0);
        const slider = document.querySelector('input[type="range"]');
        slider.max = Math.PI - wArc;
        slider.addEventListener('input', event => {
            const val = parseFloat(slider.value);
            svg.selectAll(".arc").remove();
            // svg.selectAll(".bg-arc").remove();
            update(val);
        });