Hierarchy

[00:00:00]
>> Another module that I really like in D3 is D3 hierarchy. And this one helps us calculate the positions for, let's say, trees, tree maps, and circle packs. So you can see circle packs, and again, there's examples that you can click and it will link to usually in the observable notebook that explains how to use it.

[00:00:29]
And so for D3 hierarchy, it helps us calculate the x, y-positions and where applicable the dimensions the width, height, radius for our tree layout or a tree maps, or circle packs. And just like with D3 shapes, they take in our raw data and returns a new object without mutating that original data.

[00:00:56]
So here's an example nested data set. And in this case, it's the label is clear, it has 10 children. And those 10 children have their own children, goes down and down. And once we pass that in to D3 tree, what we get back is this new nested object with x, y-positions and a few other pieces of information.

[00:01:28]
And you can see that it maintains, sorry, not this one. It maintains right here a similar, the same nested structure as our original raw data. But you can expand this raw data to see that it remains untouched. And you can use this object to then create each of these nodes, each of these nested nodes.

[00:01:54]
And position each of the nodes in this tree, and these links that were drawn in between you can actually use D3 shape. D3 shape has a function called link that will help you calculate the path string so that you get these kind of nice little bit curved links between each of the tree nodes.

[00:02:19]
And so this is how we're getting this tree.