JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<svg width="500" height="500"></svg>

CSS

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

JavaScript

var svg = d3.select("svg");
var data = [{
      "date" : "2015-03-06",
      "score" : 30
    }, {
      "date" : "2015-02-06",
      "score" : 22
    }, {
      "date" : "2015-01-06",
      "score" : 43
    }, {
      "date" : "2014-12-06",
      "score" : 10
    }, {
      "date" : "2014-11-06",
      "score" : 38
    }, {
      "date" : "2015-02-20",
      "score" : 30
    }, {
      "date" : "2015-03-05",
      "score" : 44
    }, {
      "date" : "2015-03-11",
      "score" : 37
    } ];

var x = d3.time.scale()
	.domain(d3.extent(data, function(d) { return new Date(d.date);}))
					.range([0, 500]);

var y = d3.scale.linear()
		.domain([0, d3.max(data, function(d) {return d.score;})])
		.range([500, 0]);

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

svg.append('path')
	.attr('d', line(data))