JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstat/1.5.2/jstat.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">
<div id="chart">
  <svg></svg>
</div>

CSS

#chart svg {
  height: 400px;
  width: 800px;
}

JavaScript

//based off http://nvd3.org/examples/linePlusBar.html and http://bl.ocks.org/daluu/f58884c24ff893186416
var finalDataset = null; //for debugging in JS console

//define margins for chart, histogram bin size, and the x scale for the bins
var m = {top: 30, right: 60, bottom: 50, left: 70}
  , h = 400 - m.top - m.bottom
  , w = 800 - m.left - m.right
  , numBins = 10;
var x = d3.scale.linear().domain([0, 10]).range([0, w]);

var dataset = [2.4059769174850905,
2.7600000000000002,
3.8217080187144488,
2.3899284588203313,
3.7264403738739054,
7.63,
3.16,
3.1600000000000006,
3.160000000000001,
2.06,
1.9728802107932477,
1.7180599494369857,
1.747203022782844,
2.39,
2.06,
2.06];
//in case we want to deal with the unaltered data
  //generate the histogram bin'd dataset using d3 histogram methods (which should use x scale defined above?)
  //and generate the CDF values using jStat - https://github.com/jstat/jstat
  var jstat = this.jStat(dataset);
  binData = d3.layout.histogram().bins(x.ticks(numBins))(dataset);
  var convertedData = [];
  var countObj = {'key': 'Count', 'bar': true, 'color': '#ccf', 'values': []};
  var cdfObj = {'key': 'CDF', 'color': '#333', 'values': []};
  for(var i = 0; i < binData.length; i++){
    countObj.values.push([binData[i].x,binData[i].y]);
    cdfObj.values.push([binData[i].x,jstat.normal(jstat.mean(), jstat.stdev()).cdf(binData[i].x)]);
  }
  convertedData.push(countObj);
  convertedData.push(cdfObj);
  data = convertedData;
  finalDataset = data;

  nv.addGraph(function() {
      var chart = nv.models.linePlusBarChart()
            .margin({top: m.top, right: m.right, bottom: m.bottom, left: m.left})
            //We can set x data accessor to use index. Reason? So the bars all appear evenly spaced.
            .x(function(d,i) { return i })
            .y(function(d,i) {return d[1] })
            ;

      chart.xAxis.tickFormat(function(d) {
        return data[0].values[d] && data[0].values[d][0] || 0;
      });

      chart.y1Axis
       ...