D3.js: Cutting-edge Data Visualization

Using the histogram layout

We are going to use the histogram layout to create a bar chart of the number of donations received. The layout itself will handle everything from collecting values in bins to calculating heights, widths, and positions of the bars.

Histograms usually represent a probability distribution over a continuous numerical domain, but the names of donation recipients are ordinal. To bend the histogram layout to our will, we will have to turn names into numbers—we'll use a scale.

Since it feels like this could be useful in other examples, we'll put the code in helpers.js:

export function uniques(data, name) { let uniques = []; data.forEach((d) => { if (uniques.indexOf(name(d)) < 0) { uniques.push(name(d)); } }); return uniques; } ...