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/d3-tip/0.6.7/d3-tip.min.js"></script>
<div id="chart">
  <svg></svg>
</div>

CSS

svg {
    font: 10px sans-serif;
  }
  .bar {
    fill: steelblue;
    shape-rendering: crispEdges;
    opacity: 1;
  }
  .axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
    opacity: 1;
  }
  .line {
    fill: none;
    stroke: purple;
    stroke-width: 1.5px;
    opacity: 1;
  }
  .d3-tip {
  line-height: 1;
  font-size: 11px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-radius: 1px;
  z-index: 1000;
}

  .d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.85);
  position: absolute;
  text-align: center;
}
.d3-tip.adv:after {
  color: rgba(0, 0, 0, 0);
}
/* Style tooltips differently based on direction*/
.d3-tip.e:after {
  margin: -5px 0 0 -5px;
  top: 50%;
  left: -50%;
  content: "\25c0";
}
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  content: "\25BC";
}
.d3-tip-value {
  color: #fff;
  float: right;
}

JavaScript

var m = {top: 50, right: 50, bottom: 50, left: 50}
  , h = 400 - m.top - m.bottom
  , w = 500 - m.left - m.right
  , numBins = 10;

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];

var bins = [0,1,2,3,4,5,6,7,8,9,10]

var x = d3.scale.ordinal().rangeRoundBands([0, w], 0.1);

var data = d3.layout.histogram().bins(bins)(dataset);
//console.log(data)

function calcCDF(data){
  data.forEach(function(d,i){
      if(i === 0){
      d.cum = d.y/dataset.length
    }else{
      d.cum = (d.y/dataset.length) + data[i-1].cum
    }
  })
  return data
}

data = calcCDF(data)
console.log(data)


x.domain(data.map(function(d) { return d.x+' - '+(d.x+d.dx-0.01).toFixed(2); }));

//Axes and scales
var yhist = d3.scale.linear()
                .domain([0, d3.max(data, function(d) { return d.y; })])
                .range([h, 0]);

var ycum = d3.scale.linear().domain([0, 1]).range([h, 0]);

var xAxis = d3.svg.axis()
              .scale(x)
              .ticks(numBins)
              .orient('bottom');

var yAxis = d3.svg.axis()
              .scale(yhist)
              .orient('left');

var yAxis2 = d3.svg.axis()
               .scale(ycum)
               .orient('right')
               .tickFormat(d3.format("%"));

//Draw svg
var svg = d3.select("body").append("svg")
            .attr("width", w + m.left + m.right)
            .attr("height", h + m.top + m.bottom)
            .append("g")
            .attr("transform", "translate(" + m.left + "," + m.top + ")");
            
var tip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .direction('n')
          .html(function(d) {
            var rangeLine = "<strong>Range:&nbsp;&nbsp;</strong> <span class='d3-tip-value'>" +  (d.x).toFixed(2) + " to " + (d.x+d.dx-0.01).toFixed(2) + "</span><br>"
        ...