In a previous video, we took a data that was hierarchical in nature where we had the United States and then, we have the states, and the cities inside, and the sales for each city, and we transform this data using the D3 hierarchy that basically was able to connect this as a tree rather than just a simple set of arrays inside other objects, and allowing us for example, to from a children be able to get the parent, on how also to get the sums for each city and we had a children. That would make it easier for us to use the next function that is Treemap that we run in the data in order to get the positions of the squares that we want to draw on the screen to represent a Treemap. So, our goal is to build a treemap where each square is going to be a city and the squares is going to be proportional to the sales that we had in each city and by doing that, we're going to also be able to get an idea of the sales in each state and in the whole US. So, we already have the treemap running here, where we are processing our data and adding the positions of the squares. Our next step is just draw the squares on the screen. So to do that, we first going to create the groups that we need. We're going to call those cells. So, cells is each square where we're going to draw our data and you're going to do that in group using the group element of SVG. So, we're going to select all g and then, for each g, our goal is to create one g for each city that we have in the data. So as I said, you may want to draw the squares representing the states, but depending on how you draw things, it turns out that the positions of the square of each city together is going to represent the squares of the states. So, if you have a high number of children, you may have a problem with that. But if you don't, you can represent that using colors or other features, you may not need to draw the parent, that is in this case would be the states. So, our goal is to drive only the cities. So, for that reason in data we're going to use our leaves. The leaves are basically the end of our tree that in this case is going to be the cities, those were the last level that we had in our data. After that, we're going to select that dot enter, so we can create a g for every new leaves or every new city that we find in the data, and you are going to append a g Our last step is to position this g in the right position. So, we're going to set an attribute, that is the transform attribute, and we are going to translate this element based on the positions that the treemap algorithm gave us. So, we're going to translate and it's going to be d.x0, that is the top position of our square that we want to draw in the x coordinate, and then d.y0, that's the position of the top of the square in the y coordinate. So, we just want to move our group there to start to drawing. So, once I have those groups in each group. So remember, if I'm doing cell here, anything that I do here is going to happen for each of the groups that I created in my data. So for each of those, we're going to add a rectangle and we're going to set its width to ten, and I'm going to set the height to ten, and you'll see that now we get some squares here. So, they don't have the right size yet, but they are in the right position. So, the system will read position those square where we want them, but now we have to set the width and height to be equivalent to feel the whitespace that we are looking here. So to do that, we're going to change and instead of using width equal to ten. Remember that the algorithm is going to give me the position of the top corner of the square and the position of the bottom right corner of the square. So, if I want to know the width, I can subtract the end from the beginning and I'm going to get the width of the square. So, that's the reason why we do d.x1 minus d.x0 to define the width of each square. So you see that now, the width are feeling my space. Our next step is the same thing with the height, y1 minus d.y0. Okay. So, now I filled everything, but now it's hard to see the space between them. Like, where is the separation between those elements. Turns out that you can actually tweak the treemap algorithm to say I want to have some space between those elements. So, you can say, padding inner, and add some pixels here to say, I want you to separate then a little bit. So, you can decide the size of the separation that you want. But, now we basically draw the squares, but there are some lines between them that is basically whitespace because those square are not really filling 100%, it creates a padding between them. But still, it's hard for me to distinguish states here. So, maybe you want to use the color to distinguish the state. So, let's create a color scale here that's going to be I scale ordinal and you're going to use the D3 scheme category ten that contains a predefined palette of colors that we can use. So, now we can use g is to decide how are we going to fill rect, what's going to be the color of the rect. So, you can just say, attribute fill, is going to be based on my color scale. So, the original data that I received is going to be- first, I'm looking at the children. So, if I want the name of the state, the first thing that I have to go it should go to the parent to get the name of the state because these squares represent cities. So, we're gonna do that by doing d.parent and that's going to take me to the parent of the element. So, now I want to get the data. So, if I want to get the original data that we had before running our algorithms, we have to dot data because that's my original data and I want the name of the state. So, we're going to do name. So, now you see that based on the name we get the colors. So, we have one state that is blue, one state that is orange and as I said, based on the positions of the squares of the cities, you are able to tell that the blue state is actually larger than the orange state. And if I want to get the names of things, so I can actually know which state is width, I can actually add just a text. So, that's the reason why we use a group because by using a group we can just add the text to the group and the text we're going to be close to the right position. So, we're just going to append a new text and in this text we're going to set the text to be the city name. So, remember if I want to get the original data, I have to do dot data, dot name, that's my original data. So, you see that some cities are starting to pop up here. Our next step is to fix the position of those texts. So, the first thing that we want to move them down. So, we want to change the baseline to hanging. So, this means that whatever position that I give to them is going to be on the top. So, you see that now the words are inside. We're going to also change their color a little bit to white to make it easier to read inside our colorful squares. So, if I look here I got to be able to see that we have Albany here and New York, and Buffalo. So, those are basically the state of New York and if I go here, I have Los Angeles, San Francisco, San Diego, this is California. So, I could say that we are selling more in the State of New York than in the State of California by using this realization. Even though I just visualized the cities, I end up also getting squares for the states. I could have multiple hierarchies and that's the idea of the treemap, is kind of a tree, but it's as if you've seen them from top down and you were able to get information from the leaves, but also from each level that you also have in your data.
