Learn D3.js

A standard hierarchical layout

The d3.hierarchy() generator function receives a root node from an existing hierarchical structure and transforms it by adding standard properties and methods. The resulting structure can be used with layout generator functions to create visualizations such as trees, treemaps, and partitions.

The d3.hierarchy() function doesn't create hierarchies from flat data. Your data should already contain a hierarchy, that is, it should at least have a node containing a set of child nodes. When generating a standard hierarchy you will need to pass a reference to the node that contains an array of child nodes. If the child nodes array is stored in a property called children, you just need to pass the root node reference: ...