Practice: Tree Map Part 2

Loading...

From the course by New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

36 ratings

New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

36 ratings

Course 3 of 4 in the Specialization Information Visualization

In this course you will learn how to use D3.js to create powerful visualizations for web. Learning D3.js will enable you to create many different types of visualization and to visualize many different data types. It will give you the freedom to create something as simple as a bar chart as well your own new revolutionary technique. In this course we will cover the basics of creating visualizations with D3 as well as how to deal with tabular data, geography and networks. By the end of this course you will be able to: - Create bar and line charts - Create choropleth and symbol maps - Create node-link diagrams and tree maps - Implement zooming and brushing - Link two or more views through interaction The course mixes theoretical and practical lectures. We will show you step by step how to use the library to build actual visualizations and what theoretical concepts lie behind them. Throughout the course you will learn skills that will lead you to building a whole application by the end of the lectures (a fully working visualization system to visualize airlines routes). This course is the third one of the “Specialization in Information Visualization". The course expects you to have some basic knowledge of programming as well as some basic visualization skills.

From the lesson

Layouts and interaction

Visualizing Networks8:02

Practice: Visualizing Networks Part 17:45

Practice: Visualizing Networks Part 28:32

Hierarchical Data7:48

Practice: Tree Map Part 16:53

Practice: Tree Map Part 29:52

Meet the Instructors

Enrico Bertini
Associate Professor
Computer Science and Engineering
Cristian Felix
PhD. Candidate
Computer Science and Engineering

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.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play