This chart shows a histogram of a Bates distribution. The data is randomly generated. The values are then binned at regular intervals using D3’s histogram layout. The x-axis uses a linear scale, such that the tick values appear between bars; this provides better indication that each bar represents the count of values between its surrounding tick values.
See also this histogram of a log-normal distribution of time durations.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .bar rect { | |
| fill: steelblue; | |
| shape-rendering: crispEdges; | |
| } | |
| .bar text { | |
| fill: #fff; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| // Generate a Bates distribution of 10 random variables. | |
| var values = [644,652,665,693,701,712,712,716,719,723,735,737,738,738,745,748,756,756,757,757,761,762,763,764,767,771,772,775,778,786,724,794,800,803,806,808,815,816,818,820,824,825,826,829,831,835,842,844,846,846,847,854,860,862,868,871,873,874,877,878,885,889,890,896,899,909,920,921,922,937,939,946,956,956,956,962,971,976,979,983,962,999,1003,1014,1015,1023,1030,1050,1053,1054,772,1056,1055,1082,1085,1097,1098,1116,1128,1135,1162,1174,1177,1188,1197,1198,1198,1201,1220,1224,1226,1237,1108,1152,1253,1134,1286,1209,1301,1306,1309,1314,1316,1327,1364,1164,1305,1414,1472,1543,1470,1634,1351,1803,1650,1881,1908] | |
| // A formatter for counts. | |
| var formatCount = d3.format(",.0f"); | |
| var margin = {top: 10, right: 30, bottom: 30, left: 30}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.scale.linear() | |
| .domain([600, 2000]) | |
| .range([0, width]); | |
| // Generate a histogram using twenty uniformly-spaced bins. | |
| var data = d3.layout.histogram() | |
| .bins(x.ticks(20)) | |
| (values); | |
| var y = d3.scale.linear() | |
| .domain([0, d3.max(data, function(d) { return d.y; })]) | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| 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(data) | |
| .enter().append("g") | |
| .attr("class", "bar") | |
| .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); | |
| bar.append("rect") | |
| .attr("x", 1) | |
| .attr("width", x(data[0].dx) - 1) | |
| .attr("height", function(d) { return height - y(d.y); }); | |
| bar.append("text") | |
| .attr("dy", ".75em") | |
| .attr("y", 6) | |
| .attr("x", x(data[0].dx) / 2) | |
| .attr("text-anchor", "middle") | |
| .text(function(d) { return formatCount(d.y); }); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| </script> |
