JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="https://d3js.org/d3.v6.min.js"></script>
    <div id="pano-outer">
        <img id="pano-img"
            src="https://webentwicklung.ulrichbangert.de/images/2016-06-05_WolfenbĂĽttel_Bankplatz_Panorama_3708x640.jpg">
    </div>
    <svg width="600" height="300">
    </svg>

CSS

#pano-outer {
            width: 100%;
            overflow-x: auto;
        }

JavaScript

const innerRadius = 80,
            outerRadius = 85,
            svg = d3.select("svg")

        // Create left background arc
        const bgArcLeft = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(Math.PI)
            .endAngle(Math.PI * 2);
        svg.append("path")
            .attr("class", "bg-arc-left")
            .attr("d", bgArcLeft)
            .attr("fill", "lightgrey")
            .attr("transform", "translate(100,100)");

        // Create right background arc
        const bgArcRight = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0)
            .endAngle(Math.PI);
        svg.append("path")
            .attr("class", "bg-arc-right")
            .attr("d", bgArcRight)
            .attr("fill", "lightgrey")
            .attr("transform", "translate(300,100)");

        // Create top background rectangle
        bgRectTop = svg.append("rect")
            .attr("x", 100)
            .attr("y", 15)
            .attr("width", 200)
            .attr("height", 5)
            .attr("fill", "lightgrey");

        // Create bottom background rectangle
        bgRectBottom = svg.append("rect")
            .attr("x", 100)
            .attr("y", 180)
            .attr("width", 200)
            .attr("height", 5)
            .attr("fill", "lightgrey");

        const panoOuter = document.querySelector('#pano-outer'),
            panoImg = document.querySelector('#pano-img');
        panoImg.addEventListener('load', event => {
            function update(start) {
                // Create sliding arc
                const arc = d3.arc()
                    .innerRadius(innerRadius)
                    .outerRadius(outerRadius)
                    .startAngle(start)
                    .endAngle(start + wArc);
                svg.append("path")
                    .attr("class", "arc")
                    .attr("d", arc)
                 ...