JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
.overlay {
  fill: none;
  pointer-events: all;
}
.focus circle {
  fill: none;
  stroke: steelblue;
}
.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 2;
  shape-rendering: crispEdges;
}
.grid .tick {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}
.grid path {
  stroke-width: 0;
}
.border-rect {
  stroke: black;
  fill:none;
}
}

JavaScript

var data = [{
  x: '1-May-12',
  y: 5
}, {
  x: '30-Apr-12',
  y: 28
}, {
  x: '27-Apr-12',
  y: 58
}, {
  x: '26-Apr-12',
  y: 88
}, {
  x: '25-Apr-12',
  y: 8
}, {
  x: '24-Apr-12',
  y: 48
}, {
  x: '23-Apr-12',
  y: 28
}, {
  x: '20-Apr-12',
  y: 68
}, {
  x: '19-Apr-12',
  y: 8
}, {
  x: '18-Apr-12',
  y: 58
}, {
  x: '17-Apr-12',
  y: 5
}, {
  x: '16-Apr-12',
  y: 80
}, {
  x: '13-Apr-12',
  y: 38
}];

var margin = {
    top: 30,
    right: 20,
    bottom: 35,
    left: 50
  },

  width = 1200 - (margin.left + margin.right);
height = 360 - (margin.top + margin.bottom);

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y");
var xScale = d3.time.scale()
	.range([0, width])
	.domain(d3.extent(data, function(d) {
  	return parseDate.parse(d.x);
	}))
  .nice();
var yScale = d3.scale.linear().range([height, 0])
	.domain([0, d3.max(data, function(d) {
  	return d.y;
	})])
  .nice();


var xAxis = d3.svg.axis().scale(xScale)
  .orient("bottom").ticks(10).tickSize(5)
  .outerTickSize(0);

var yAxis = d3.svg.axis().scale(yScale)
  .orient("left").ticks(5).tickSize(5)
  .tickFormat("");

var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .attr("class", "bg-color")
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function make_x_axis() {
  return d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(25)
}

// function for the y grid lines
function make_y_axis() {
  return d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(25);
}

svg.append('g')
	.append('rect')
  .attr('class','border-rect')
  .attr('width',width)
  .attr('height',height);

svg.append("g")
  .attr("class", "grid")
  .call(make_x_axis()
    .tickSize(height, 0, 0)
    .tickFormat("")
  );

// Draw the y Grid lines
svg.append("g")
  .attr("class", "grid")
  .call(make_y_axis()
    .tickSize(-width, 0, 0)
   ...