JSFiddle - React, Tailwind, and code Playground

by sagar Bhanushali

HTML

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
</head>

<body>

    <div id="gui"></div>
    <input id="scale" value="" readonly/>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</body>

CSS

body {
            overflow: visible;
        }
        
        .zoom-in,
        .zoom-out {
            font-size: 20px;
            margin: 10px;
        }
        
        #gui {
            position: absolute;
            top: 100px;
            right: 100px;
            cursor: pointer;
        }
        
        #scale {
            position: absolute;
            top: 150px;
            right: 20px;
        }

JavaScript

var width = 900,
            height = 500;


        var symzoom = d3.zoom()
            .scaleExtent([-8, 8])
            .on("zoom", zoom);

        var geozoom = d3.zoom()
            .scaleExtent([-8, 8])
            .on("zoom", zoom);

        //Create the SVG Viewport

        var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

        svg
            .call(geozoom);


        var data = [

            {
                "x": 200,
                "y": 200,
                "r": 15,
                "label": "Node 1"
            },
            {
                "x": 210,
                "y": 210,
                "r": 25,
                "label": "Node 2"
            },
            {
                "x": 300,
                "y": 300,
                "r": 15,
                "label": "Node 3"
            },
            {
                "x": 310,
                "y": 310,
                "r": 25,
                "label": "Node 4"
            },
            {
                "x": 200,
                "y": 300,
                "r": 15,
                "label": "Node 5"
            },
            {
                "x": 310,
                "y": 210,
                "r": 25,
                "label": "Node 6"
            },
            {
                "x": 400,
                "y": 400,
                "r": 15,
                "label": "Node 7"
            },
            {
                "x": 40,
                "y": 310,
                "r": 25,
                "label": "Node 8"
            },
                 {
                "x": 150,
                "y": 100,
                "r": 15,
                "label": "Node 9"
            },
            {
                "x": 310,
                "y": 200,
                "r": 25,
                "label": "Node 10"
            },
            {
                "x": 200,
                "y": 200,
                "r": 15,
                "label":...