liveBook · Manning

D3.stratify()

As explained in D3.js in Action, Third Edition

d3.stratify() is a D3 hierarchy function that constructs a hierarchy from tabular records specifying parent-child relationships.

d3.stratify() converts flat CSV records into a hierarchy: a root node containing parent-child relationships for hierarchical visualizations. section 11.1.1 section 11.5

Build the hierarchy by configuring the columns that identify each relationship:

  • Import stratify from d3-hierarchy when using the focused module instead of the complete D3 library. section 11.1.1
  • Configure id(d => d.child) to identify each node and parentId(d => d.parent) to identify its parent. section 11.1.1
  • Pass the flat records to the configured generator to obtain root, then read root.descendants() and root.leaves(). section 11.1.1

Convert language records

import { stratify } from "d3-hierarchy"; const hierarchyGenerator = stratify() .id(d => d.child) .parentId(d => d.parent); const root = hierarchyGenerator(flatData); const descendants = root.descendants(); const leaves = root.leaves(); section 11.1.1

Table 11.2 The parent-child relationships communicated via columns in a CSV file
child
parent
total_speakers
native_speakers
Languages
Indo-European
Languages
Sino-Tibetan
Languages
Germanic
Indo-European
Sinitic
Sino-Tibetan
Indo-Aryan
Indo-European
Romance
Indo-European
Romance
Indo-European
English
Germanic
1,132 M
379 M
Mandarin Chinese
Sinitic
1,117 M
918 M
Hindi
Indo-Aryan
615 M
341 M
Spanish
Romance
534 M
460 M
French
Romance
280 M
77 M

Inspect the child and parent columns used to express language relationships before configuring the generator. section 11.1.1

How D3.js in Action, Third Edition covers it

How deep it goes
Explains installation, importing, accessor configuration, invocation, and node extraction, but not generator internals.
Examples
Uses language parent-child records with speaker totals, including English, Germanic, and Indo-European.
What it assumes
Assumes loaded flat CSV records and teaches the child and parent column mapping needed to build a hierarchy.
What you can do after
Build it from scratch by importing stratify, configuring id and parentId, and generating root, descendants, and leaves.
How it connects
Connects CSV data with d3.hierarchy(), descendants(), leaves(), d3.pack(), and d3.tree().
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.