JSFiddle - React, Tailwind, and code Playground

by sagar Bhanushali

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<div id="gui"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

.zoom-in,
.zoom-out {
  font-size: 20px;
  margin: 10px;
}

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

JavaScript

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(2000).map(function() {
    return [randomX(), randomY()];
  });

var g = svg.append("g");

var circle = g.selectAll("circle")
  .data(data)
  .enter().append("circle")
  .attr("r", 2.5)
  .attr("transform", function(d) {
    return "translate(" + d + ")";
  });

function zoom() {
  g.attr("transform", d3.event.transform);
}

var _zoom = d3.zoom()
  .scaleExtent([1, 8])
  .on("zoom", function() {
    g.attr("transform", d3.event.transform);
  });


svg.append("rect")
  .attr("fill", "none")
  .attr("pointer-events", "all")
  .attr("width", width)
  .attr("height", height)
  .call(d3.zoom()
    .scaleExtent([1, 8])
    .on("zoom", zoom));


var gui = d3.select("#gui");
gui.append("span")
  .classed("zoom-in", true)
  .text("+")
  .on("click", function() {
    _zoom.scaleBy(svg, 2);
  });
gui.append("span")
  .classed("zoom-out", true)
  .text("-")
  .on("click", function() {
    _zoom.scaleBy(svg, 0.5);
  });