D3.js: Cutting-edge Data Visualization

Visualizing hierarchical data

Hierarchal layouts display information that is hierarchical in nature. That is perhaps a slightly recursive definition, but the basic idea is that certain data items break down into zero or more data items at a lower level, and then perhaps to another level, and so on, for as many levels as is required.

Hierarchical layouts are all created from the d3.layout.hierarchy() function, but there are specializations of this function that create various layouts which fall into common visual patterns such as trees, clusters, and enclosures and packs. We will take a look at an example of each of these types of layouts.

Tree diagrams

Tree diagrams are essentially node-link diagrams. In Chapter 9, Complex Shapes using Paths, we ...