Another type of data that is complex when we try to visualize is sort of hierarchical data. And hierarchical data basically means that you have a parent, and this parent have some children that may have other children and that can keep going on. So, in this video I want to show you how we can prepare the code, so we can draw a treemap. And a treemap basically, is going to work as a square representing the whole thing and every time I have a children, I'm going to split that based on the children. So for example, I could have two children, so then I would two regions and then I can take these children and then split these children in more three other ones and maybe here, I'm going to have other three children as well. And that process can be recursive. It keep happen and it's splitting our square in multiple elements. So if we look at our data, our data is going to represent exact legit phenomenon. So here, for example, I have US and US is my root. So the root is always the main node that you have, is the first one, and then, US has children and those children are basically these states. So if we go down here, we have the names. So we have New York as being one of the states. And then here, we have California as being a second state, and then further, we take New York and split the new children. So remember, New York state is children of USA. And then we have the cities of Albany, New York, and Buffalo being children of New York. So if I want, for example, to visualize my sales among different states and cities, but at the same time I want to get a look of which states have higher sales than the other ones. That is one strategy that we can use. And use this information to draw our treemap. So remember, we're going to have a root, and then each root is going to have children where we're going to split this square based on the children. And then, if we have children's of the children, we keep going and splitting this work. And the algorithm is going to trying to find good splitting points. You going to try to split such that you may have some properties, for example, do you want your squares? Rectangles should be as square as possible when you are splitting. At the same time, you want the size of the area of the rectangle to be proportional to the values. So we have the sales and the size of the rectangle should be proportional to the sales of each city. So how can we do that with the tree? So the tree's going to provide us with some help to create this visualization. And similar to what we have done with the arcs and similar to what we have done with the networks, we can use this function to compute positions of elements. And it's going to return us the position of the squares that we want to draw on the screen. So we're going to need to create first an element that is our treemap. And a treemap. Is our first layout or generator that's going to transform our data in the treemap layout that I'm looking for. So you're going to call dtree.treemap and then you're going to set the size. Is important because since they're going to be splitting squares, I need to know what is the size that I can use for this layout. So you're going to set the size to be equal to our body width and body height. Our next step is to transform our data, because the problem now is we have our data with the children, but we don't have aggregation for each state, or we don't have an easy way for our children to get the parent. So the tree also provides a helper that's going to move file data, and add these informations, and transform our data from a sync adjacent into a more complex network of data. Where, if I have children, I can actually get to the parent. Or if I have a parent, I can get to the children. When I have aggregations between the childrens, and so on. So to do that, we're going to use the D3 hierarchy. So you're going to do root, that's our main node, and that's going to be based, On the D3 hierarchy [SOUND] and we're going to provide our data to this function. So this function is going to just take our data and add additional information that's going to facilitate the treemap to work and one of his information is the sum or the aggregation by each parent. So for example, I had cities inside state, so now this function is going to sum the sales of the city and add that to the state. And do the same thing, sum the the sales in your states and add it to the parent. So we're going to provide a function here that returns what we want to sum. And we want to sum the sales. Okay, so that's going to produce the data that we want to use. So let's take a look on this data. And you're going to see that it starts with a node, but we get one information here that is value for example that we did not have in our data. It also has information, for example, depth, in which level of our hierarchy we are. And also the height, that means how far we can go. And if you open, for example, the children. We're going to see the same information, but now you see that the depth and height change, because we are one level down, and we only have one more level to go. But, also we have this sum here. But we also have a way to go back to the parent, if I need this information being here. So that's what hierarchy key is doing. It's adding all this information to our data so treemap can come and produce the data that we are looking for. So finally, if I run treemap on top of this data. What I get is the same data but now with x0 and x1 and y0 and y1. This is basically the positions of the squares that I want to draw for treemap, and having that is all the data that we need to create our visualization and to show this information in a treemap layout.