liveBook · Manning

D3.hierarchy()

As explained in D3.js in Action, Third Edition

d3.hierarchy() is a D3 hierarchy function that constructs a hierarchy from nested data.

d3.hierarchy() converts nested JSON data into a D3 hierarchy, commonly stored as root. The hierarchy represents parent-child relationships for hierarchical visualizations. section 11.1.2 section 11.5

Import hierarchy from d3-hierarchy, pass the nested data to hierarchy(data), and use the returned root object to inspect or lay out the tree. section 11.1.2

The resulting root structure provides useful node collections:

  • root.descendants() returns every node in the hierarchy. section 11.1.2
  • root.leaves() returns nodes without children, such as individual languages. section 11.1.2
  • The same root structure can feed pack, treemap, tree, or partition layout generators. section 11.4 section 11.5

Convert nested language data

Given JSON beginning with {"name":"Languages","children":[...]}, call const root = hierarchy(jsonData). Then derive const descendants = root.descendants() and const leaves = root.leaves(). Pass root to a layout such as tree() and use the resulting node information to draw the visualization.

How D3.js in Action, Third Edition covers it

How deep it goes
Explains invocation, descendants, and leaves, then stops short of deeper node internals or accessor configuration.
Examples
Uses nested language JSON containing Languages, language families, and individual languages such as English, Hindi, and Spanish.
What it assumes
Assumes nested JSON and basic JavaScript imports while teaching the hierarchy conversion workflow from the data structure upward.
What you can do after
Build it from scratch by converting nested JSON, retrieving nodes, and supplying root to a D3 hierarchy layout.
How it connects
Connects hierarchical data with d3.stratify(), d3.tree(), d3.pack(), d3.treemap(), and d3.partition().

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.