JSFiddle - React, Tailwind, and code Playground

by jeffxiao

HTML

<script src="https://d3js.org/d3.v3.js"></script>
<div>
<h2>
Resource:
</h2>
<ul>
<li><a href="https://bl.ocks.org/venkatesh22/29d7dcc2a9bbb87954737a38ecaa7607">bl.ocks</a></li>
<li><a href="https://gist.github.com/venkatesh22/29d7dcc2a9bbb87954737a38ecaa7607">gist</a>
</li>
</ul>
</div>

CSS

body {
  font: 14px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
  shape-rendering: crispEdges;
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 3.5px;
}
.dot {
  stroke: #000;
}
div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 80px;                  
  height: 55px;                 
  padding: 4px;             
  font: 16px sans-serif;  
  color: white;   
  font-weight: 500;   
  background: black;   
  border: 0px;      
  border-radius: 4px;           
  pointer-events: none;         
}
/* http://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html */
.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}

JavaScript

var margin = {top: 50, right: 20, bottom: 60, left: 90},
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
    
var x = d3.time.scale()
    .range([0, width]);
var y = d3.scale.linear()
    .range([height, 0]);
var xAxis = d3.svg.axis()
    .scale(x)
	.ticks(d3.time.hours,24)
    .tickSize(10)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.total_km); });

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 + ")");

var parseDate = d3.time.format("%Y-%m-%d %X");
var formatTime = d3.time.format("%e %b %-I:%M %p");
var formatCount = d3.format(",");

var data = 
[
{ 'date_time': '2014-11-15 22:23:22', 'total_km': 789 },
{ 'date_time': '2014-11-16 00:09:29', 'total_km': 850 },
{ 'date_time': '2014-11-16 22:42:34', 'total_km': 880 },
{ 'date_time': '2014-11-18 06:02:57', 'total_km': 1086 },
{ 'date_time': '2014-11-19 21:34:40', 'total_km': 1218 },
{ 'date_time': '2014-11-20 19:00:17', 'total_km': 1285 },
{ 'date_time': '2014-11-21 15:27:45', 'total_km': 1379 },
{ 'date_time': '2014-11-21 18:26:53', 'total_km': 1398 }
];

data.forEach(function(d) {
  //console.log(d.date_time)
  d.date = parseDate.parse(d.date_time);
  console.log(d.date);
  //d.total_km = +d.total_km;
  console.log(d.total_km);
});
//using imported data to define extent of x and y domains
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.total_km; }));
  

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);
      
svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
	    .selectAll(".tick...