JSFiddle - React, Tailwind, and code Playground

by sagar Bhanushali

HTML

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.zoom-in,
.zoom-out {
  font-size: 20px;
  margin: 10px;
}

#gui {
  position: absolute;
  top: 100px;
  left: 20px;
  cursor: pointer;
}

#scale {
  position: absolute;
  top: 150px;
  left: 20px;
}
</style>
</head>
<body>
  <svg width="960" height="500"></svg>
  <div id="gui"></div>
  <input id="scale" value="1" readonly/>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");

    var randomX = d3.randomNormal(width / 2, 80),
      randomY = d3.randomNormal(height / 2, 80),
      data = d3.range(100).map(function() {
        return [randomX(), randomY()];
      });

    var scale = document.getElementById('scale').value;
    var g = svg.append("g");
    var _zoom = d3.zoom()
      .scaleExtent([1, 8])
       .on("zoom", zoom);

    var circle = g.selectAll("circle")
        .data(data)
        .enter().append("circle")
        .attr("r", 10)
        .attr("transform", transform(d3.zoomIdentity));

    var view = svg.append("rect")
      .attr("fill", "none")
      .attr("pointer-events", "all")
      .attr("width", width)
      .attr("height", height)
      .call(_zoom);

    function zoom() {
      if (scale < 5) {
        circle.attr("transform", transform(d3.event.transform));
      }
      g.attr("transform", d3.event.transform);
      scale = d3.event.transform.k;
      document.getElementById('scale').value = scale;
    }

    function transform(t) {
        return function(d) {
          return "translate(" + t.apply(d) + ")";
        };
    }

    var gui = d3.select("#gui");
    gui.append("span")
      .classed("zoom-in", true)
      .text("+")
      .on("click", function() {
        view.transition().duration(1500).call(_zoom.scaleBy, 1.2);
      });
    gui.append("span")
      .classed("zoom-out", true)
      .text("-")
      .on("click", function() {
       ...