liveBook · Manning

Order()

As explained in D3.js in Action, Third Edition

The D3 stack order accessor method gets or sets the ordering strategy used to arrange series in a stack.

order() gets or sets the ordering strategy used by a D3 stack layout. Chaining it to the stack generator controls which series appear at the bottom, middle, and top of stacked bar charts, stacked area charts, and streamgraphs. section 5.2.4

D3 provides six built-in ordering strategies:

  • stackOrderNone keeps the keys array order, from bottom to top. section 5.2.4
  • stackOrderReverse reverses the keys array order. section 5.2.4
  • stackOrderAscending places the series with the smallest total at the bottom. section 5.2.4
  • stackOrderDescending places the series with the largest total at the bottom. section 5.2.4
  • stackOrderAppearance orders series by when they reach their peak values. section 5.2.4
  • stackOrderInsideOut places earlier-peaking series near the center and later-peaking series outside, supporting streamgraphs. section 5.2.4

Choose an order while configuring the stack

const stackGenerator = d3.stack() .keys(formatsInfo.map(f => f.id)) .order(d3.stackOrderInsideOut) .offset(d3.stackOffsetSilhouette);

How D3.js in Action, Third Edition covers it

How deep it goes
Explains six built-in strategies and their effects, while deferring custom ordering implementation.
Examples
Uses keys-array order, reversed order, series totals, peak timing, and inside-out streamgraph arrangements.
What it assumes
Assumes D3 stack layouts, series, and the keys array.
What you can do after
Apply it via D3 to arrange stacked series and account for resulting chart-domain changes.
How it connects
Connects stack layouts with series, the keys array, offset(), stacked charts, and streamgraphs.
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.