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: red;
  stroke: steelblue;
  stroke-width: 1.6px;
}

JavaScript

var width = 600, height = 600;
var w = width - 100;

var x = d3.scale.linear().domain([0,width]).range([0,w]);


var svg = d3.select("body")
                    .append("svg")
                    .attr("id", "svgContainer")
                    .attr("width", width)
                    .attr("height", height);
 var xAxis = d3.svg.axis().scale(x).tickSubdivide(9);
svg.append('g')
      .attr("class", "axis")
      .attr("transform", "translate(10,0)")
      .call(xAxis);