D3 Examples - Histogram Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.bars rect {
  fill: steelblue;
}
​
.axis text {
  font: 10px sans-serif;
}
​
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
</style>
<body>
<script src="https://cdn.jsdelivr.net/npm/d3@2.8.0/d3.v2.min.js"></script>
<script src="histogram-chart.js"></script>
<script>
​
d3.select("body")
    .datum(irwinHallDistribution(10000, 10))
  .call(histogramChart()
    .bins(d3.scale.linear().ticks(20))
    .tickFormat(d3.format(".02f")));
​
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;
}
​
</script>
​
    