liveBook · Manning

D3.stackOffsetExpand

As explained in D3.js in Action, Third Edition

d3.stackOffsetExpand is a D3 stack offsetting constant that normalizes each stack column so its series sum is one.

d3.stackOffsetExpand normalizes every stack column so its series sum equals 1, or 100%. Use it when a stacked chart should compare relative composition rather than absolute totals. section 5.2.4

Because normalization changes the annotated stack values to the 0–1 range, configure the vertical scale with a domain from 0 to 1. section 5.2.4

Normalize a stacked bar chart

const stackGenerator = d3.stack() .keys(formatsInfo.map(f => f.id)) .order(d3.stackOrderDescending) .offset(d3.stackOffsetExpand); section 5.2.4

How D3.js in Action, Third Edition covers it

How deep it goes
Explains normalization, transformed values, and the required 0–1 vertical-scale domain without detailing the algorithm.
Examples
Uses a D3 stack generator with descending order and d3.stackOffsetExpand for relative stacked-bar values.
What it assumes
Assumes familiarity with D3 stack generators, order and offset accessors, annotated stack data, and vertical scales.
What you can do after
Apply it via D3 to build stacked charts whose columns show composition on a 0–100% scale.
How it connects
Connects stack offsets with stack order, stacked layouts, annotated data, and vertical scales.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

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.