JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="chart"></div>

CSS

.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

JavaScript

var data = [];
  for (var i = 0; i < 500; i++) {
    data.push([Math.random(), Math.random()]);
  }
  d3.select('#chart')
  .append("svg").attr("width", window.innerWidth).attr("height",window.innerHeight)
  .datum(data).call(init());
  
  function init() {
    var svg, margin = {top: 60,bottom: 80,left: 60,right: 0}, width = 500, height = 400,
	  xaxis1 = d3.svg.axis(), xaxis2 = d3.svg.axis(), 
    scaleOne = d3.scale.linear(), scaleTwo = d3.scale.linear(), zoomable = true,
    zoom = d3.behavior.zoom().x(scaleOne).y(scaleTwo).on("zoom", zoomable ? draw : null);
    
    svg = d3.select('svg').data([data]);
    svg.enter().append('svg');
    var g = svg.append('g').attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
        g.append("defs").append("clipPath")
          .attr("id", "clip")
          .append("rect")
          .attr("width", width - margin.left - margin.right)
          .attr("height", height - margin.top - margin.bottom);
  
        g.append("svg:rect")
          .attr("class", "border")
          .attr("width", width - margin.left - margin.right)
          .attr("height", height - margin.top - margin.bottom)
          .style("stroke", "black")
          .style("fill", "none");
  
        g.append("g").attr("class", "axis One")
          .attr("transform", "translate(" + 0 + "," + (height - margin.top - margin.bottom) + ")");
  
        g.append("g").attr("class", "axis Two")
        	.attr("transform", "translate(" + 0 + "," + (height - margin.top - margin.bottom + 60) + ")");
  
        g.append("g")
          .attr("class", "scatter")
          .attr("clip-path", "url(#clip)");
  
        g.append("svg:rect")
          .attr("class", "zoom box")
          .attr("width", width - margin.left - margin.right)
          .attr("height", height - margin.top - margin.bottom)
          .style("visibility", "hidden")
          .attr("pointer-events", "all")
          .call(zoom);
  
        scaleOne.domain(d3.extent(data,...