D3.js tutorial - 19 - The Treemap Layout Video Lecture | D3.js Tutorial: A Complete Guide - Web Development

hi there I'm vno and this is my 19th
video tutorial on d3 and in this video
I'll show you yet another layout in d3
and that is the tree map layout that
we're witnessing right here and the tree
map layout is one of the hierarchical
layouts and what that means is we use it
to visualize hierarchical data and in
this case I just reused the my data JSON
file that I created for another way
another video and as you can see the
structure of this file is we have our
root our root node here and then we have
three children to that root node and two
of those children have children
themselves so we haven't we have a
hierarchical structure of our data is
what I'm trying to say and so as you can
see we're only showing we're not showing
all the objects in our data we're only
showing the leaf nodes that is the the
nodes or the object without children you
can you can do this in different ways
but that's what I chose to do so let me
show you how to well this it should be
clear what this is right yeah let's just
continue and start drawing our tree map
so as usual we start by loading up our
data so my data dot Jason function data
all right and then to create our tree
map we just as with all the other
layouts we just say d3 that layout and
then the name of the layout we can set
the size I'll just make it the same size
as our canvas and then using the notes
method where we are defining where our
data is coming from so from the data
variable here that will we're loading
with our JSON and command here and I
want to show you the data so that it's
clear what what what objects the
treatment layout returns so let's
refresh this and inspect you can see
that we are returned with an array of
nine objects each for well one for each
object in our original data and but as
you can see here where only we are only
displaying six rectangles and that is
like I said that in this case I'm only
showing the leaf nodes the nodes without
children but anyways for each of these
and returned objects we returned with
and the value for each which is stored
in our our data
we're also returned with the name of
that object but the important properties
here are the x and y and DX and dy
properties and what these referred to is
these are computed by the layout so the
x and y properties describe the starting
point from the point from which where
each rectangle is drawn so that would be
the the top left corner and
for each for each rectangle and then the
DX and dy properties references the
extent of of the rectangle so the DX
property would be for this regular
rectangle and this this point right here
and the dy would be the point right here
or this line here I hope that I hope
that makes sense it's not that
complicated actually and so let's use
those properties to draw our rectangles
we would and we can begin by and binding
our data to our document and creating a
G element for each of our notes so the
data would then come from the tree map
variable and then enter and append G or
actually we can do do it like that so we
have a class for each M G element so
attribute class
with the cell okay and now we can append
our rectangles to these G elements and
that so we there are a number of
properties that we need to define for
four rectangles in general and in SVG
right you remember that we need to
specify the x and y position and then
the width and also be height and each of
these will be functions and function or
data and see yeah I just like I showed
you we each of these objects have x + y
+ DX and dy properties and we'll just
supply these we'll just make all these
properties functions of those properties
that the tree map layout gives us so
let's say return the X for the x
position and then return dy for y and so
on
oops
and for the width that would be the DX
property and the height would be the dy
okay so let's save this and refresh and
we just have this blob a big black
rectangle that's because we're not
separating we're not giving them
different colors or any stroke or
anything at all they're all black but
okay let's start by wicked we could use
a color scale the d3 provides us with so
we'll say D through scale at category
and d3 has a number of these you can
just look them up in the documentation
but if we say category 10 we returned
with the this is function that provides
us with 10 a scale of 10 colors so we
could say fill and make that a function
or data and if we if we wanted to Oh get
so huh
if we take a look at at the at the
finished layout here you can see that we
are actually just using three different
colors and these show that these three
elements belong together these two
belong together and this one is in a
separate group and what that is based on
is if we return to our data these three
have the same color these two have the
same color and this has yet another
color so we are defining the color based
on the parent of each object and to
accomplish that will just say function
return' and then color and then we want
to base the color on the parent of each
each object and the name of that parent
so if we save now and return to this
No why not
cannot read properly name of undefined
okay
color would be the D parent name
oh this may be because all objects
doesn't don't have parents so if we make
this a we use a and an if statement so
we're saying if it has children then
return null so no color else return yeah
what we just said so refresh okay so now
it works we're just showing we're not
displaying the the objects objects that
have children okay so that's all good
the next thing would be to append some
text to our rectangles just to display
the name of that of each rectangle so
we'll say X will be a function
and here we'll return first the DX
property which is the left border and
then we'll add em the extent of that our
data so it it will be to the text will
be positioned to at their right order
right but then we'll divide this by 2 so
it's displayed in the middle middle of
each rectangle and we'll do the same for
the Y position so we'll say returned dy
+ D dy divided by 2 and yeah let's take
a look at this
okay oh and of course we need to set the
text
and the tech will be a function which
will return the name of each object so
let's save and refresh okay good good
good good but we could also say here
that we only want to return the names of
the leaf nodes so if there's children
return null else return the name yeah
and now okay as you can see we need to
separate the rectangles within each
group and we can do that just by adding
a stroke so let's say stroke will be
let's say white
and there are other ways of doing this
but that's an easy way okay so we have
our distance or space between them but
they're a little bit they're a bit too
much to the right the the labels to each
rectangle so we'll say at the here we'll
say text anchor which is by default
start but we'll say middle and say
refresh okay looking good so not very
complicated it's all based on the
properties that we returned with that
the layout returns and yeah I think
you'll get the hang of it if you just
take a close look at what I did in this
video that would be the last layout I
think that we'll cover at least for a
while and I'll see you next time