JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

CSS

.axis text {
  font: 10px sans-serif;
}
 
.axis path {
  fill: none;
  stroke: #000;
  stroke-width: 2.5px;
  shape-rendering: crispEdges;
}
 .axis line {
  fill: none;
  stroke: green;
  stroke-width: 1.6px;
}

.axis .minor {
  stroke: red;
  stroke-width: 1.4px;
}

JavaScript

// Define identity (1:1) scales
                var x = d3.scale.identity().domain([0, 600]);
                var y = d3.scale.identity().domain([0, 600]);
              
                // Define container
                var chart = d3.select("body")
                    .append("svg")
                    .attr("class", "chart")
                    .attr("width", 1200)
                    .attr("height", 800)
                    .append("g")
                    .attr("transform", "translate(40,20)");
                    
                     

                // Draw X-axis grid lines
                chart.selectAll("line.x")
                  .data(x.ticks(50))
                  .enter().append("line")
                  .attr("class", "minor")
                  .attr("x1", x)
                  .attr("x2", x)
                  .attr("y1", 0)
                  .attr("y2", 700)
                  .style("stroke", "#ccc");

                // Draw Y-axis grid lines
                chart.selectAll("line.y")
                  .data(y.ticks(50))
                  .enter().append("line")
                  .attr("class", "minor")
                  .attr("x1", 0)
                  .attr("x2", 1000)
                  .attr("y1", y)
                  .attr("y2", y)
                  .style("stroke", "#ccc");
               
                // Define stock x and y axis
                var xAxis = d3.svg.axis().scale(x).orient('top');
                var yAxis = d3.svg.axis().scale(y).orient('left');

                chart.append('g')
                  .attr("class", "axis")
                  .call(xAxis);

                chart.append('g')
                  .attr("class", "axis")
                  .call(yAxis);