liveBook · Manning

Upper boundary

As explained in D3.js in Action, Third Edition

An upper boundary is the ending cumulative stacked value of a category interval for a particular record.

An upper boundary is the ending cumulative value of an interval or stacked category. In a D3 stack, it marks where a segment ends; in a bin, it marks the interval’s upper limit. section 5.2.1 section 6.1

Read an upper boundary according to the data structure:

  • Access stacked boundaries by index: d[0] is the lower boundary and d[1] is the upper boundary. section 5.2.1
  • Compute a stacked upper boundary by adding the current category to the preceding cumulative total; that value becomes the next category’s lower boundary. section 5.2.1
  • Read a bin’s upper boundary from x1, while its lower boundary is stored in x0. section 6.1

A stacked music-format column

For 1986, vinyl contributes $2,825M, so its upper boundary is $2,825M. Adding $5,830M in cassette sales produces an upper boundary of $8,655M. Adding $2,170M for CDs produces the column’s final upper boundary of $10,825M. section 5.2.1

const stackGenerator = d3.stack()  #1
  .keys(formatsInfo.map(f => f.id));  #2

const annotatedData = stackGenerator(data); #3

Inspect how d3.stack() produces the annotated arrays containing each category’s lower and upper boundaries. section 5.2.1

How D3.js in Action, Third Edition covers it

How deep it goes
Defines indexed stack boundaries and bin limits, then works through cumulative 1986 sales without mathematical formalism.
Examples
Uses stacked 1986 music-format sales and salary bins with x0 and x1 limits as concrete examples.
What it assumes
Assumes basic arrays and D3 data concepts while teaching stack and bin boundary structures through examples.
What you can do after
Understand how to interpret upper boundaries in D3 stack and bin generator output.
How it connects
Connects upper boundaries to stack layouts, lower boundaries, cumulative values, bins, and distribution visualizations.

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.