Built-in layouts

By default, D3 comes with around a dozen built-in layouts that cover most common visualizations. They can be split roughly into normal and hierarchical layouts. Normal layouts represent data in a flat hierarchy, whereas hierarchical layouts generally present data in a tree-like structure. 

The normal (non-hierarchical) layouts are as follows:

  • Histogram
  • Pie
  • Stack
  • Chord
  • Force

The hierarchical layouts are as follows:

  • Tree
  • Cluster
  • Tree map
  • Partition
  • Pack

We will create a boatload of examples over the next two chapters. We start with hierarchical layouts (located in the d3-hierarchy module) because they're the most consistent in terms of data structure, which looks something like this:

{ "name": "Tywin Lannister",  "children": ...

Get D3.js 4.x Data Visualization - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.