JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.chart path {
  fill: none;
}

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

.chart {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #999999;
  height: 210px;
  clear: both;
}

.overlay {
    fill: none;
    pointer-events: all
}
}

JavaScript

// Flashy tooltip

// dataset1
var dataset1 = new Array();
for (var day=10; day < 30; day++) { 
    for (hour=10; hour < 24; hour++) { 
        dataset1.push({
            'date': '2013-02-'+day+' '+hour+':00:00',
            'running': Math.floor(Math.random()*200),
            'waiting': Math.floor(Math.random()*100),
        });
    }
}

// Draw and update the chart.
$(document).ready(function () {
  var chart = TimeSeriesChart().showOverlay(true);
  d3.select(".chart")
    .datum(dataset1)
    .call(chart);
     
});

// The chart object.
function TimeSeriesChart() {

    var margin      = {top: 10, right: 10, bottom: 110, left: 40},
        xScale      = d3.time.scale(),
        yScale      = d3.scale.linear(),
        xAxis       = d3.svg.axis().scale(xScale).orient("bottom").ticks(7),
        yAxis       = d3.svg.axis().scale(yScale).orient("left").ticks(5),
        line        = d3.svg.line().interpolate("linear").x(X).y(Y),
        parseDate   = d3.time.format("%Y-%m-%d %X").parse,
        bisectDate  = d3.bisector(function(d) { return d.date; }).left,
        beginDate   = '',
        endDate     = '',
        color       = d3.scale.category10(),

        marginBrush = {right: margin.right, bottom: 30, left: margin.left}, // .top is set dynamically
        xScaleBrush = d3.time.scale(),
        yScaleBrush = d3.scale.linear(),
        xAxisBrush  = d3.svg.axis().scale(xScaleBrush).orient("bottom").ticks(7),
        brush       = d3.svg.brush(),
        brushDirty,
        showLegend,
        showOverlay;

    function chart(selection) {
        selection.each(function(data)
        {
            marginBrush.top = $(selection[0]).height() - marginBrush.bottom - 50;

            var width = $(selection[0]).width() - margin.left - margin.right,
                height = $(selection[0]).height() - margin.top - margin.bottom,
                heightBrush = $(selection[0]).height() - marginBrush.top - marginBrush.bottom;


            // Set the domain of the...