JSFiddle - React, Tailwind, and code Playground

by David Guan

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<body>
</body>

CSS

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
div.tooltip {
	position: absolute;
	padding: 10px;
	background: #f4f4f4;
	border: 0px;
	border-radius: 3px;
	pointer-events: none;
	font-size: 11px;
	color: #000;
	line-height: 16px;
	border: 1px solid #d4d4d4;
}

JavaScript

var maindata=[
{"date":"21-APR-16 04:19 AM","Delhi":30,"Mumbai":28},
{"date":"21-APR-16 05:19 AM","Delhi":32,"Mumbai":30},
{"date":"21-APR-16 06:19 AM","Delhi":34,"Mumbai":34},
{"date":"21-APR-16 10:19 AM","Kolkata":34},
{"date":"21-APR-16 11:19 AM","Delhi":48,"Chennai":40,"Kolkata":36}
];


			var that = this;
			var deepClonedCopy = jQuery.extend(true, {}, maindata);
			var data;
			data = $.map(deepClonedCopy, function(el) { return el });
		    //	var passedheight = this.getHeight();
			//var containerWidth = jQuery.sap.byId(this.oParent.sId).width() || 800; // gets super parent width
			var margin = {top: 15, right: 30, bottom: 20, left: 30},
			width = 960- margin.left - margin.right,
			 height = 500 - margin.top - margin.bottom;
			if(data.length >= 1){
				//alert(JSON.stringify(data));
			var parseDate = d3.time.format("%d-%b-%y %H:%M %p").parse;
			var maxDate = d3.time.hour.offset(parseDate(d3.max(data, function(d) { return d.date; })),+1);
			var minDate = d3.time.hour.offset(parseDate(d3.min(data, function(d) { return d.date; })),-1);
			
			var div = d3.select("#toolTip");
			
			var	x = d3.time.scale()
			.domain([minDate, maxDate])
			.range([0, width]);

			var y = d3.scale.linear()
			    .range([Math.ceil(height), 0]);

			var color = d3.scale.category10();

			var xAxis = d3.svg.axis()
			    .scale(x)
			    .orient("bottom").ticks(4);

			var yAxis = d3.svg.axis()
			    .scale(y)
			    .orient("left").ticks(4).tickSize(-width, 0, 0);

			var line = d3.svg.line()
			    .x(function(d) { return x(d.date); })
			    .y(function(d) { return y(d.tonneValue); });

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

			  data.forEach(function(d) {
			    d.date = parseDate(d.date);
			  });

			  var wsfs = ['Delhi', 'Mumbai', 'Kolkata',...