liveBook · Manning

D3.stackOffsetSilhouette

As explained in D3.js in Action, Third Edition

d3.stackOffsetSilhouette is a D3 stack offsetting constant that centers the stacked extent around a baseline.

d3.stackOffsetSilhouette is a D3 stack offset constant that shifts the zero baseline to the center of the chart. It distributes stacked shapes above and below that baseline, making it useful for streamgraphs with a central baseline. section 5.2.4

Configure a centered streamgraph

Combine the offset with a stack order when creating the generator: d3.stack().keys(keys).order(d3.stackOrderInsideOut).offset(d3.stackOffsetSilhouette). Because the baseline moves, update the vertical scale domain from the minimum lower boundary and maximum upper boundary of the annotated series. section 5.2.4

How D3.js in Action, Third Edition covers it

How deep it goes
Defines the baseline shift and requires adapting the vertical scale domain for negative and positive extents.
Examples
Uses an inside-out ordered streamgraph configuration and recalculates the vertical scale from annotated series boundaries.
What it assumes
Assumes familiarity with stacked layouts, baseline positioning, and vertical scale domains.
What you can do after
Apply it via D3 by configuring a stack generator and resizing the vertical scale domain around the centered baseline.
How it connects
Connects D3 stack layouts, offset accessors, stack order, streamgraphs, 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.