JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

CSS

.axis {
	    font: 10px sans-serif;
	}
	.axis path, .axis line {
	    fill: none;
	    stroke: red;
	    shape-rendering: crispEdges;
	}

JavaScript

var svgContainer = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 100);

//Create the Scale we will use for the Axis
var axisScale = d3.scale.linear()
    .domain([0, 100])
    .range([0, 400]);
//Create the Axis
var xAxis = d3.svg.axis()
    .scale(axisScale);


//Create an SVG group Element for the Axis elements and call the xAxis function
var xAxisGroup = svgContainer.append("g")
    .attr("class", "axis")
    .call(xAxis);