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://via.placeholder.com/30000x120">
    </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
        const bgRectTop = svg.append("rect")
            .attr("x", 100)
            .attr("y", 15)
            .attr("width", 200)
            .attr("height", 5)
            .attr("fill", "lightgrey");

        // Create bottom background rectangle
        const 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 => {
            const wPanoImg = panoImg.naturalWidth,
                // Die Positionen fest legen, bei denen im Bild
                // die Uebergaenge zwischen Kurven und Geraden liegen:
                pos1 = 0,
                pos2 = wPanoImg / 4,
                pos3 = wPanoImg / 4 * 2,
                pos4 = wPanoImg / 4 * 3,
                // Die Breite des sichtbaren Bereichs im Container des...