| license: gpl-3.0 |
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"> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| .axis path { | |
| /* fill: gray; */ | |
| stroke: green; | |
| } | |
| .tick line { | |
| stroke: red; | |
| } | |
| .tick text { | |
| fill: orange; | |
| } | |
| .bar rect { | |
| fill: steelblue; | |
| } | |
| .bar text { | |
| fill: #fff; | |
| font: 10px sans-serif; | |
| } | |
| </style> | |
| <body> | |
| <script> | |
| /*---- step 2: create a random array ------------------ | |
| code: var data = d3.range(1000).map(d3.randomBates(10)); | |
| 1. create sequential array: -- | |
| purpose: create array [0, 999] | |
| code: d3.range(1000) | |
| 2. calc a random mean: -- | |
| purpose: calc a mean of 10 random number within [0,1] | |
| code: d3.randomBates(10) | |
| 3. get 1000 random mean: -- | |
| purpose: collect 1000 randomized number within [0,1] | |
| code: d3.range(1000).map(d3.randomBates(10)); | |
| 4. to change random number range: -- | |
| default: range [0,1] | |
| change to [0,10]: | |
| code: d3.range(1000).map(d3.randomBates(10)) | |
| .map(function(d){return d*10;}) | |
| ------------------------------------------------------------------------*/ | |
| var data = d3.range(1000).map(d3.randomBates(10)); | |
| /* ---- step 2: format numbers ---------------------------------- | |
| 1. purpose: | |
| to make numbers easy and good looking | |
| 2. code example: -- | |
| var formatCount = d3.format(",.0f"); | |
| 3. key parts: -- | |
| func: d3.format() | |
| specification: ",.0f": -- | |
| 3.1: , (1000,000) | |
| 3.2: .0 (no decimal) | |
| 3.3: f (numeric) | |
| 4. check detail parameter of a specification: -- | |
| code: d3.formatSpecifier(",.0f"); | |
| -------------------------------------------------------------------- */ | |
| var formatCount = d3.format(",.0f"); | |
| // console.log(d3.formatSpecifier(",.0f")); | |
| var margin = {top: 10, right: 30, bottom: 30, left: 30}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.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 xScale = d3.scaleLinear() | |
| .rangeRound([0, width]); | |
| /* ---- step 4: create histogram data obj ----------------------------- | |
| 1. set the func: -- | |
| code: var bins = d3.histogram() | |
| 2. set domain-range: -- | |
| code: var bins = d3.histogram() | |
| .domain(x.domain()) | |
| meaning: use x-axis scale-map domain [0,1] | |
| 3. split into bins: -- | |
| code: var bins = d3.histogram() | |
| .domain(x.domain()) | |
| .thresholds(x.ticks(20)) | |
| meaning: 1. x.ticks(20) split x-axis into 20 parts, | |
| 2. .thresholds() make parts into bins | |
| 4. apply data : -- | |
| code: var bins = d3.histogram() | |
| .domain(x.domain()) | |
| .thresholds(x.ticks(20)) | |
| (data) | |
| meaning: func bins and func x both needs data | |
| 5. outcome: -- | |
| 1. bins => Array[20] | |
| 2. each element is an array | |
| 3. each array is like [0:0.1,1:0.3,2:0.21,3:0.4, length: 35, x0:0.65,x1:0.7] | |
| ---------------------------------------------------------- */ | |
| var bins = d3.histogram() | |
| .domain(xScale.domain()) | |
| .thresholds(xScale.ticks(20)) // split into 20 bins | |
| (data); | |
| console.log(bins); | |
| // ---- for histogram: yScale use d.length set for y coord and height of rect | |
| var yScale = d3.scaleLinear() | |
| .domain([0, d3.max(bins, function(d) { return d.length; })]) | |
| .range([height, 0]); | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(xScale)); | |
| var bar = svg.selectAll(".bar") | |
| .data(bins) | |
| .enter() | |
| .append("g") | |
| .attr("class", "bar") | |
| .attr("transform", function(d) { return "translate(" + xScale(d.x0) + "," + yScale(d.length) + ")"; }); | |
| var rects = bar.append("rect") | |
| .attr("x", 1)// move 1px to right | |
| .attr("width", xScale(bins[0].x1) - xScale(bins[0].x0) - 1) | |
| .attr("height", function(d) { return height - yScale(d.length); }); | |
| bar.append("text") | |
| .attr("y", 6) | |
| .attr("x", (xScale(bins[0].x1) - xScale(bins[0].x0)) / 2) | |
| .attr("text-anchor", "middle") | |
| .text(function(d) { return formatCount(d.length); }) | |
| .attr("dy", ".75em"); | |
| </script> |