JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

svg {
  font: 10px sans-serif;
}

.area {
  fill: steelblue;
  clip-path: url(#clip);
}

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

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

JavaScript

//defining data
//subset of data.  Real data is here: https://raw.githubusercontent.com/brooksandrew/simpleblog/gh-pages/assets/csv/cleanTrips_small.csv
 var dataset = [
     {"time": "2014-08-12 05:00:00", "Minutes": "40"},
     {"time": "2014-08-12 05:12:00", "Minutes": "29"},
     {"time": "2014-08-12 05:14:00", "Minutes": "25"},
     {"time": "2014-08-12 05:16:00", "Minutes": "26"},
     {"time": "2014-08-12 05:25:00", "Minutes": "10"},
     {"time": "2014-08-12 05:30:00", "Minutes": "3"},
     ]
     
var margin = {top: 10, right: 10, bottom: 100, left: 40},
    margin2 = {top: 430, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    height2 = 500 - margin2.top - margin2.bottom;

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

//setup x
var x = d3.time.scale().range([0, width]),
    x2 = d3.time.scale().range([0, width]),
    xMap = function(d) { return x(d.time); } 
    y = d3.scale.linear().range([height, 0]),
    y2 = d3.scale.linear().range([height2, 0]);
    yMap = function(d) { return y(d.Minutes); } // data -> display

//setup y
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left");

// setup fill color
var cValue = "firebrick"

var brush = d3.svg.brush()
    .x(x2)
    .on("brush", brushed);

// add the graph canvas to the body of the webpage
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)

svg.append("defs").append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width)
    .attr("height", height);

var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var mydots = focus.append("g");

var context = svg.append("g")
    .attr("class", "context")
   ...