D3 layouts are modules that transform data into drawing rules. The simplest layout might only transform an array of objects into coordinates, like a scale.
However, we usually use layouts for more complex visualizations, such as drawing a force-directed graph or a tree, for instance. In these cases, layouts help us to separate calculating coordinates from putting pixels on the screen. This not only makes our code cleaner, but it also lets us reuse the same layouts for vastly different visualizations.
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...
