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.
But we usually use layouts for more complex visualizations—drawing a force-directed graph or a tree, for instance. In these cases, layouts help us to separate calculating coordinates from putting pixels on a page. This not only makes our code cleaner, but it also lets us reuse the same layouts for vastly different visualizations.
Theory is boring, let's dig in.
By default, d3 comes with 12 built-in layouts that cover most common visualizations. They can be split roughly into normal and hierarchical layouts. The normal layouts are as follows:
histogrampiestackchordforce
The hierarchical layouts are as follows:
partitiontreeclusterpacktreemap
To see how they behave, we're going to make an example for each type. We'll start with the humble pie chart and histogram, then...