liveBook · Manning

Histogram

As explained in D3.js in Action, Third Edition

A histogram is a chart that represents the distribution of quantitative data by grouping values into bins and displaying their frequencies.

A histogram shows how quantitative values are distributed by grouping data points into bins and representing each bin with a frequency-scaled rectangle. section 6.0 section 6.2

Build a histogram by following this implementation sequence:

  • Preprocess the dataset with d3.bin(), producing equal-width bins with lower and upper boundaries. section 6.0 section 6.6
  • Create linear x and y scales: x positions rectangles between bin boundaries, while y maps frequencies from zero to the tallest bin. section 6.2

Salary distribution

A salary histogram uses each rectangle for a salary bracket. Rectangle width follows the bin boundaries, and rectangle height follows the number of respondents in that bracket, revealing concentrations and gaps. section 6.2

Updating filtered data

When a user selects All, Women, or Men, filter the dataset, regenerate its bins, and update each rectangle’s y and height attributes. section 7.2.3

How D3.js in Action, Third Edition covers it

How deep it goes
Explains binning, linear scales, SVG rectangles, axes, and interactive updates without covering statistical formalism.
Examples
Uses a United States data-visualization salary distribution and filters it to all, women’s, or men’s responses.
What it assumes
Assumes basic dataset and visualization handling while teaching bins, scales, SVG rectangles, axes, and data binding.
What you can do after
Build it from scratch with D3 by binning data, scaling frequencies, binding rectangles, and updating filtered distributions.
How it connects
Connects histograms with bins, data binding, linear scales, distributions, box plots, pyramid charts, and violin plots.

Also explained in

Compare how 11 books explain histogram →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.