0:01

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.

0:46

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.

3:09

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.

3:47

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.

4:31

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.

5:33

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.

5:56

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.