How to create histogram with fixed bin width about d3-array HOT 2 CLOSED

Regarding the first or last bin not being the same width as the others: that is because given n thresholds, n + 1 bins will be produced. The first bin (bins[0]) contains any value less than the first threshold (thresholds[0]); the last bin (bins[thresholds.length]) contains any value greater than or equal to the last threshold (thresholds[thresholds.length - 1]).

If you prefer, you can consider the effective width of the first and last bin as infinite, since they are bounded only by the input data (or more precisely the histogram’s domain) and not the thresholds. The bins[0].x0 is equal to domain[0] and bins[thresholds.length].x1 is equal to domain[1] given the histogram’s domain, which defaults to the extent of the input data.

If you want to force the domain to coincide exactly with the tick interval, you can use d3.range to manually create the ticks as you discuss in option 3. If you also want the tick thresholds to be “human-readable” (per the design of d3.ticks) you can nice your domain before computing the ticks, and then use scale.ticks:

var data = [1, 2, 3, 4, 4.7];
var count = 5;
var x = d3.scaleLinear().domain(d3.extent(data)).nice(count);
var histogram = d3.histogram().domain(x.domain()).thresholds(x.ticks(count));
var bins = histogram(data);
console.log("bin widths: " + bins.map(b => b.x1 - b.x0));

You could also use d3.tickStep to nice your histogram’s domain manually, but that’s exactly what linear.nice does.

from d3-array.

Thank you for the detailed answer – I wish you a happy new year 🎉 🍾 🎆

from d3-array.