liveBook · Manning

Series

As explained in D3.js in Action, Third Edition

A series is a related category of values represented as one component across the bars of a stacked visualization.

A series is a related category of values represented as one component across the bars of a stacked visualization. In a stacked bar chart, each category becomes a series layered with the others. section 5.2.1 section 5.2.2

D3’s stack layout turns category values into an annotated dataset. Each series has a key and contains one entry per year; each entry records lower and upper boundaries for drawing its segment. section 5.2.1

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

const annotatedData = stackGenerator(data); #3

Declare a stack generator, provide the category keys, and pass the dataset to obtain positioned series. section 5.2.1

Use the annotated series to build the visible chart:

  • Create a vertical linear scale from zero to the largest upper boundary. section 5.2.2
  • Loop through each series and bind its entries to rectangles. section 5.2.2
  • Set each rectangle’s position and height from d[0] and d[1], then color it using the series key. section 5.2.2

Music-format sales

A dataset containing sales for music formats from 1973 through 2019 produces one series per format. For each year, the series boundaries determine the stacked segment’s vertical position and height. section 5.2.1

How D3.js in Action, Third Edition covers it

How deep it goes
Explains series through stack-generator configuration, annotated boundaries, and rectangle geometry without extending beyond chart construction.
Examples
Uses yearly sales for multiple music formats, with each format rendered as a colored segment.
What it assumes
Assumes a dataset with category values and familiarity with scales, SVG rectangles, and data binding.
What you can do after
Build stacked bar segments with D3 by configuring category keys and mapping annotated boundaries to SVG rectangles.
How it connects
Connects series to stacked bar charts, stack layout generators, annotated datasets, linear scales, and data binding.
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

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.