O'Reilly logo

Learning d3.js Data Visualization - Second Edition by Swizec Teller, Ændrew Rininsland

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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; } ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required