JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

JavaScript

var margin = {top: 25, right: 20, bottom: 35, left: 30},
    width = 440,
    height = 270;
var data = [{"dateTimeTaken":"2013-02-01 13:49:25","reading":"0.90000","parameterType":"Flouride"},{"dateTimeTaken":"2013-02-01 13:49:30","reading":"1.70000","parameterType":"Temperature"},{"dateTimeTaken":"2013-02-01 13:49:35","reading":"0.40000","parameterType":"Flouride"},{"dateTimeTaken":"2013-02-01 13:49:40","reading":"1.60000","parameterType":"Temperature"},{"dateTimeTaken":"2013-02-01 14:02:18","reading":"1.60000","parameterType":"Temperature"},{"dateTimeTaken":"2013-02-01 14:02:23","reading":"0.80000","parameterType":"Flouride"},{"dateTimeTaken":"2013-02-01 14:02:28","reading":"11.00000","parameterType":"pH"},{"dateTimeTaken":"2013-02-01 14:02:33","reading":"1.30000","parameterType":"Temperature"},{"dateTimeTaken":"2013-02-01 14:02:38","reading":"1.00000","parameterType":"Temperature"},{"dateTimeTaken":"2013-02-01 14:02:43","reading":"0.40000","parameterType":"Flouride"},{"dateTimeTaken":"2013-02-01 14:02:48","reading":"0.40000","parameterType":"Flouride"},{"dateTimeTaken":"2013-02-01 14:02:53","reading":"0.60000","parameterType":"Temperature"}];
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
data.forEach(function(d) {
  d.dateTimeTaken = parseDate(d.dateTimeTaken);
  d.reading = +d.reading;
  d.parameterType = d.parameterType;
});
var x = d3.time.scale().range([0, width]);
x.domain(d3.extent(data, function(d) { return d.dateTimeTaken; }));
var y = d3.scale.linear().range([height, 0]);
y.domain([0, d3.max(data, function(d) { return d.reading; })]);
console.log(data);
var line = d3.svg.line()
	.interpolate('linear')
    .x(function(d) { return x(d.dateTimeTaken); })
    .y(function(d) { return y(d.reading); });
var svg = d3.select('body').append('svg');
svg.append("path")
	.attr("class", "line")
	.attr("d", line(data))
    .style({fill: 'none', stroke: 'black'});