JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

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>
<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 cities = []
var parseDate = d3.time.format("%d-%b-%y %H:%M %p").parse;
maindata.forEach(function(d) {
  cities.push(d3.keys(d).filter(function(key) {
      return key !== "date" && key !== "maxLength";
    }));
  });
cities = d3.set(d3.merge(cities)).values();
console.log(cities)
var myData = [];
var allValues = [];
var allDates =[];
cities.forEach(function(city){
	var cityData = {};
	cityData.name = city;
	cityData.values = [];
	maindata.forEach(function(md){
		if (md[city]){
		  allValues.push(md[city])
			allDates.push(parseDate(md.date))
			cityData.values.push({date: parseDate(md.date), value: md[city]})
		}
	})
	myData.push(cityData)
});

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(d3.extent(allDates))
    .range([0, width]);

  var y = d3.scale.linear()
	  .domain([0, d3.max(allValues)])
   ...