Pyramid plot

As explained in D3.js in Action, Third Edition

A pyramid chart is a distribution chart that compares two distributions side by side using opposing or adjacent shapes.

A pyramid plot compares two distributions side by side with opposing or adjacent shapes. Its two vertical histograms stand back-to-back, making category differences visible across shared brackets. section 6.0 section 6.3

Build a pyramid plot by following these implementation choices:

• Group values into equal-width bins, generating separate bins for each category with d3.bin(). section 6.3
• Reserve opposing halves of the horizontal axis for the two categories, using separate horizontal scales when useful. section 6.3
• Draw bars whose lengths represent counts or percentages within each bracket; use lollipops or dumbbells as alternatives. section 6.3
• Share a vertical axis for the measured brackets, such as salary ranges or age groups. section 6.3

Salary distribution

A salary pyramid uses purple bars for women and orange bars for men. The vertical axis spans $0 to $240K, while opposing horizontal scales show each group’s percentage within salary brackets. section 6.3

Figure 6.9 Pyramid charts of the age distribution of women and men in Canada in 2021. The chart on the left uses bars to visualize the data, while the chart on the right uses lollipop or dumbbell shapes.

Compare bar-based and lollipop or dumbbell-based pyramid plots for women’s and men’s age distributions. section 6.3

How D3.js in Action, Third Edition covers it

How deep it goes

Builds the chart with bins, separate scales, and proportional marks, but defers detailed implementation beyond focused construction guidance.

Examples

Uses salary distributions by gender and age distributions by gender, with bars, lollipops, and dumbbells.

What it assumes

Assumes familiarity with d3.bin() and appending SVG rectangles to a chart.

What you can do after

Build it from scratch with D3 by binning two datasets and mapping their percentages to opposing chart halves.

How it connects

Connects pyramid plots to histograms, bins, box plots, violin plots, and D3 data binding.

liveBookmanning.com

Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Statistics Slam DunkA pyramid plot is a visualization that uses mirrored or stacked horizontal bars to compare distributions across ordered categories.

Compare how 2 books explain pyramid plot →

Related concepts

• d3.bin()uses · d3.bin() is a D3-array function that groups numeric values into bins according to a configured domain, thresholds, and value accessor.
• histogramhas part · A histogram is a representation that groups observations into bins or value ranges and records their frequencies or other distribution summaries.
• bar chartalternative to · A bar chart is a visualization that compares quantitative values for discrete categories using rectangular bars whose lengths or heights encode magnitude.
• dimensionhas part · A dimension is an independent coordinate, measurable axis, or descriptive attribute used to represent, locate, or analyze something.
• proportionuses · A proportion is a ratio expressing a part or quantity relative to a whole or reference quantity, commonly represented as a fraction, decimal, or percentage.

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.