D3 Histograms

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//getbootstrap.com/examples/dashboard/dashboard.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/mbostock/1933560/raw/33b27ff5a01ae7768ae43bec480b7b308115c0dc/histogram-chart.js"></script>
 <div class="container-fluid">
      <div class="row">
        <div class="col-xs-6 sidebar">
          <ul class="nav nav-sidebar" id='hists'>            
          </ul>
        </div>
        <div class="col-xs-3">
          <div id="main"></div>
            <h2>Main</h2>
        </div>
     </div>
 </div>

CSS

.bars rect {
  fill: steelblue;
}

.axis text {
  font: 10px sans-serif;
}

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

JavaScript

var dat = irwinHallDistribution(1000, 70)
myhist = histogramChart().width(300).height(100)
  .bins(d3.scale.linear().ticks(20))
  .tickFormat(d3.format(".02f"))

d3.select("#hists").selectAll("li")
    .data([dat, irwinHallDistribution(10000, 10)]).enter()
    .append("li").append("a").attr("href", "#")
  .call(myhist)

function irwinHallDistribution(n, m) {
  var distribution = [];
  for (var i = 0; i < n; i++) {
    for (var s = 0, j = 0; j < m; j++) {
      s += Math.random();
    }
    distribution.push(s / m);
  }
  return distribution;
}