JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

.main text {
        font: 12px sans-serif;  
    }

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

    circle {
        fill: steelblue;
    }

JavaScript

var data = [
        [4862.68457, 1072.691528],[4887.687012, 1116.689331],[4896.882813, 1058.535767],[4902.156738, 1060.492065],[4912.194336, 1063.437988],[4912.351074, 1080.261963],[4915.981445, 1117.331055],[4919.913574, 1063.484009],[4927.597168, 1065.326294],[4929.431641, 1090.789307],[4929.901367, 1103.804932],[4939.075684, 1068.672607],[4939.422363, 1037.592896],[4941.214355, 1066.263672],[4942.22998, 1115.288696],[4945.557129, 1092.27478],[4949.09375, 1076.938477]
    ];

    var margin = {top: 30, right: 15, bottom: 60, left: 80}
                 , width = 700 - margin.left - margin.right
                 , height = 500 - margin.top - margin.bottom;
    
    var min_x = d3.min(data, function(d) { return d[0]; });
    var max_x = d3.max(data, function(d) { return d[0]; });
    var avg_x = (max_x - min_x)/10;
    var min_y = d3.min(data, function(d) { return d[1]; });
    var max_y = d3.max(data, function(d) { return d[1]; });
    var avg_y = (max_y - min_y)/10;

    var xScale = d3.scale.linear()
                .domain([min_x-avg_x, max_x+avg_x])
                .range([ 0, width ]);

    var yScale = d3.scale.linear()
                .domain([min_y-avg_y, max_y+avg_y])
                .range([ height, 0 ]);
    
    var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient('bottom')
                .tickSize(-height);

    var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient('left')
                .ticks(5)
                .tickSize(-width);

    var zoom = d3.behavior.zoom()
                .x(xScale)
                .y(yScale)
                .scaleExtent([1, 10])
                .on("zoom", zoomed);

    var chart = d3.select('#container')
                .append('svg:svg')
                .attr('width', width + margin.right + margin.left)
                .attr('height', height + margin.top + margin.bottom)
                .call(zoom);

    var main = chart.append('g')
              ...