|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.bar rect { |
|
fill: steelblue; |
|
} |
|
|
|
.bar text { |
|
fill: #fff; |
|
font: 10px sans-serif; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="https://d3js.org/d3.v4.0.0-alpha.50.min.js"></script> |
|
<script> |
|
|
|
var uniformData = d3.range(1000).map(d3.randomUniform(0, 1)); |
|
var normalData = d3.range(1000).map(d3.randomNormal(0.5, 0.15)); |
|
var logNormalData = d3.range(1000).map(d3.randomLogNormal(-1, 0.5)); |
|
var batesData = d3.range(1000).map(d3.randomBates(10)); |
|
var irwinHallData = d3.range(1000).map(d3.randomIrwinHall(1.41)); |
|
var exponentialData = d3.range(1000).map(d3.randomExponential(4)); |
|
|
|
const chartWidth = 500; |
|
const chartHeight = 300; |
|
|
|
function createChart(data) { |
|
var formatCount = d3.format(",.0f"); |
|
|
|
var margin = {top: 10, right: 30, bottom: 30, left: 30}, |
|
width = chartWidth - margin.left - margin.right, |
|
height = chartHeight - margin.top - margin.bottom; |
|
|
|
var x = d3.scaleLinear() |
|
.rangeRound([0, width]); |
|
|
|
var bins = d3.histogram() |
|
.domain(x.domain()) |
|
.thresholds(x.ticks(20)) |
|
(data); |
|
|
|
var y = d3.scaleLinear() |
|
.domain([0, d3.max(bins, function(d) { return d.length; })]) |
|
.range([height, 0]); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
var bar = svg.selectAll(".bar") |
|
.data(bins) |
|
.enter().append("g") |
|
.attr("class", "bar") |
|
.attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }); |
|
|
|
bar.append("rect") |
|
.attr("x", 1) |
|
.attr("width", x(bins[0].x1) - x(bins[0].x0) - 1) |
|
.attr("height", function(d) { return height - y(d.length); }); |
|
|
|
bar.append("text") |
|
.attr("dy", ".75em") |
|
.attr("y", 6) |
|
.attr("x", (x(bins[0].x1) - x(bins[0].x0)) / 2) |
|
.attr("text-anchor", "middle") |
|
.text(d => formatCount(d.length)); |
|
|
|
svg.append("g") |
|
.attr("class", "axis axis--x") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(d3.axisBottom(x)); |
|
} |
|
createChart(uniformData); |
|
createChart(normalData); |
|
createChart(logNormalData); |
|
createChart(batesData); |
|
createChart(irwinHallData); |
|
createChart(exponentialData); |
|
</script> |
