JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="csvdata">
time,Minutes,VehicleID,DirectionText,RouteID,TripID,hour,ID,departure,arrival,est
2014-08-12 10:56:04,98,6470,South to Federal Triangle,64,6464164,10,6464164_6470,1,0,100.905133334796
2014-08-12 10:56:14,98,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,100.735716668765
2014-08-12 10:56:24,98,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,100.564666668574
2014-08-12 10:56:35,98,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,100.392566668987
2014-08-12 10:56:45,98,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,100.220399999619
2014-08-12 10:56:55,98,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,100.049533335368
2014-08-12 10:57:05,97,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,99.8792833367984
2014-08-12 10:57:16,97,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,99.7085166692734
2014-08-12 10:57:26,97,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,99.5380666693052
2014-08-12 10:57:36,97,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,99.3684500018756
2014-08-12 10:57:46,97,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,99.1971833348274
2014-08-12 10:57:57,97,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,99.0259000023206
2014-08-12 10:58:07,96,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,98.8549500028292
2014-08-12 10:58:17,96,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,98.6845999995867
2014-08-12 10:58:27,96,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,98.5121333360672
2014-08-12 10:58:38,96,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,98.3386333346367
2014-08-12 10:58:48,96,6470,South to Federal Triangle,64,6464164,10,6464164_6470,0,0,98.1669999996821
2014-08-12...

CSS

body {
	    font: 10px sans-serif;
	}
	.bar rect {
	    /*fill: forestgreen;*/
	    shape-rendering: crispEdges;
	}
	.bar text {
	    fill: #fff;
	}
	.axis path, .axis line {
	    fill: none;
	    stroke: #000;
	    shape-rendering: crispEdges;
	}
	span.underline {
	    border-bottom: 2px solid grey;
	    display:block;
	    color:#606060;
	}
	.brush .extent {
	    stroke: #000;
	    fill-opacity: .125;
	    shape-rendering: crispEdges;
	}
	#csvdata {
	    display: none;
	}

JavaScript

//defining some synthetic data (not actual data used)
var Minutes = [5,5,5,4,4,4,3,3,3,2,2,2,1,1,1,0,0,0]
var est     = [5,5,4,4,4,5,3,1,3,2,1,5,2,3,1,1,1,0]

dataset2 = [Minutes, est]

var Quantile = function (values, quantile) {
    values.sort(function (a, b) {
        return a - b;
    });
    var q = Math.floor(values.length * quantile);
    var ret = values[q];
    return parseFloat(ret).toFixed(1);
};

//controls size of app
var margin = {
    top: 10,
    right: 30,
    bottom: 30,
    left: 30
},
width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// A formatter for counts.
var formatCount = d3.format(",.0f");

//intitialize
// via http://www.d3noob.org/2014/04/using-html-inputs-with-d3js.html
d3.select("#nMinutes").on("input", function () {
    d3.select("svg").remove();
    buildhist(dataset2, +this.value);
});

//buildhist(dataset2, 10);

var buildhist = function (adata, cutoff) {

    //taking just estimates where Minutes==cutoff
    var mydata = [];
    for (i = 0; i < adata[0].length; i++) {
        if (adata[0][i] == cutoff) {
            mydata.push(adata[1][i])
        }
    }

    //defining dynamic bounds for histogram
    var dmax = Math.max.apply(Math, mydata);
    var dmin = Math.min.apply(Math, mydata);

    //numOfBins = 40;
    if ((dmax - dmin) > 8) var numOfBins = dmax - dmin
    else var numOfBins = (dmax - dmin) * 4;

    //find statistics for each sentenance
    var busMedian = Quantile(mydata, 0.5);
    var busQ90 = Quantile(mydata, 0.9);
    var busQ10 = Quantile(mydata, 0.1);

    var x = d3.scale.linear()
        .domain([dmin, dmax])
        .range([0, width]);

    var data = d3.layout.histogram()
        .bins(x.ticks(numOfBins))(mydata);

    var y = d3.scale.linear()
        .domain([0, d3.max(data, function (d) {
        return d.y;
    })]) //when cutoff==10, 705
    .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom").ticks(dmax - dmin);

  ...