JSFiddle - React, Tailwind, and code Playground

CSS

.axis text {
     font: 10px sans-serif;
   }
   
   .axis path {
     fill: none;
     stroke: #000;
     stroke-width: 1px;
     shape-rendering: crispEdges;
   }
   
   .axis line {
     fill: none;
     stroke: darkred;
     stroke-width: 1px;
   }
   
   .axis .minor {
     fill: none;
     stroke: red;
     stroke-width: 0.5px;
   }
   
   .line {
     stroke: blue
     }
   }

JavaScript

var datasize = 1000;
var margin = {
  top: 40,
  right: 40,
  bottom: 40,
  left: 40
};
width = datasize + margin.left + margin.right;
height = datasize + margin.top + margin.bottom;

var getData = function() {
  var data = [];
  for (var i = 0; i < 1000; i++) {
    data.push({
      x: i,
      y: Math.sin(i/10) * Math.floor(Math.random() * 1000)
    });
  };
  return data;
};

// Define identity (1:1) scales
var x = d3.scale.linear().range([0, datasize]).domain([0, datasize]);
var y = d3.scale.linear().range([datasize, 0]).domain([0, datasize]);

// Define container
var chart = d3.select("body")
  .append("svg")
  .attr("class", "chart")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Add the valueline path.
var line = d3.svg.line()
  .interpolate("monotone")
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return y(d.y);
  });


// Draw X-axis grid lines
// Minor ticks
chart.selectAll("line.x")
  .data(x.ticks(50))
  .enter().append("line")
  .attr("x1", x)
  .attr("x2", x)
  .attr("y1", 0)
  .attr("y2", datasize)
  .style("stroke", "red")
  .style("stroke-width", "0.5px");

// Major ticks
chart.selectAll("line.x")
  .data(x.ticks(10))
  .enter().append("line")
  .attr("x1", x)
  .attr("x2", x)
  .attr("y1", 0)
  .attr("y2", datasize)
  .style("stroke", "darkred")
  .style("stroke-width", "0.5px");

// Draw Y-axis grid lines
// Minor ticks
chart.selectAll("line.y")
  .data(y.ticks(50))
  .enter().append("line")
  .attr("x1", 0)
  .attr("x2", datasize)
  .attr("y1", y)
  .attr("y2", y)
  .style("stroke", "red")
  .style("stroke-width", "0.5px");

// Major ticks
chart.selectAll("line.y")
  .data(y.ticks(10))
  .enter().append("line")
  .attr("x1", 0)
  .attr("x2", datasize)
  .attr("y1", y)
  .attr("y2", y)
  .style("stroke", "darkred")
  .style("stroke-width", "0.5px");

// Define stock x and y axis
var xAxis =...