D3.js tutorial - 16 - Cluster; Pack & Bubble layouts Video Lecture | D3.js Tutorial: A Complete Guide - Web Development

hey what's up I'm vno and this is my
16th 16th video tutorial on d3 there's a
lot of stuff going on in this video
first of all as you can see I've I've
added in a new skin to my text editor I
hope it's the code is still visible and
readable if not just go crazy in the
comments section so the things I want to
show you in this video are well it's
three additional layouts and those are
the cluster layout to pack layout and
well a bubble chart which is basically a
pack layout but customized so first of
all the real quick one I want to show
you is if we go back to our tree layout
which we this is the one we created in
the last video if we take a look at the
layout right here you can see that I've
added an additional node and mr. mr. X
here which has the same depth as
sylviandavid
but no children so in the in the in the
data it looks like this we could
whenever we have data like this we can
display it in one of two ways we can
either display it using the tree layout
like I'm doing right now where the depth
is preserved or we can use the cluster
layout which takes all the leaf nodes
that is all the nodes that do not have
children and place them
at the end of our layout so I can just
show you real quick if we just yeah it's
just this word actually that we have to
change from the tree layout to the
cluster layout and d3 d3 will
recalculate the position of mr. X so
that he ends up here instead of here all
right that was the first a quick thing I
wanted to show you so let's move on to
the second one which is the pack lay out
the back layout looks like this and it
has an hierarchical structure as well
the root node is the big circle that
contains everything else and it goes
down to the leaf nodes which are the
smallest one once right here and when
when well a difference between the tree
layout and the pack layout is that the
radius of the circles well let me put it
this way in the pack layout the radius
of the circles can can be used in one of
two ways we can either use it to
actually display some numeric value if
we have some numbers in our data or we
can just use it to display the node
depth so the way I've been is the way I
set up the data for this example if we
head over to my data at Jason I've added
this value property to each node and I
just made the
the root node I supplied it with the
largest value and the values the values
are are descending and the further down
we come down the hierarchy but we could
use this to store for example each
person's age or whatever
okay so we're running out of time let's
begin coding first of all we want to
create our pack layout and just as
before we just create it like that d3
layout pack and let's set the size and
actually in this tutorial tutorial I
want to store the dimensions in
variables so it's a bit more easier
easier to keep track up so we'll set the
size of the the pack layout to the width
and height variable just make some room
here and also we'll give each each
circle a padding of 10 pixels and this
is a method that belongs to or are
provided to us by the layout a pack
layout right ok
so let's load up some data we load our
my data that JSON file set up our
callback function
and that shouldn't be there alright so
just as in with the tree layout the pack
layout provides us with I say provide us
with a lot but never mind it provides us
with a notes method and the notes method
in in the pack layout has pretty much
the same function as in the tree layout
so with console.log the nodes take a
look at them you can see that we are
returned with an object for each node
and it contains the X&Y a property's
name deaf children and also and two
additional properties and what they're
doing in simplify term is just setting
the radius of each or the size of each
circle so yeah that's that's the nodes
method of the pack layout so we can
continue just as with the tree layout to
create a well to bind some data and
we'll just
select everything with a clasp note and
the data will be provided by the nodes
method and enter as usual and will
append a G element to each node and well
that is the node and we'll give it a
class of node
and this is basically just the exact
same code as in the previous video so
I'll just speed this up
oh this is the messy part translate and
append DX and the comma and the pend
dy and at finish off with that
yeah okay so we have our G elements for
each node now what we want to do is
append a circle the actual circle and so
to each node append one circle and let
the radius and this is one difference
between the tree layout and the pack
layout and we'll let the radius be a
function of the data so we'll return dr
as we saw earlier that there are
property of the object and we can give
each
what am i what am i doing I'm tired it's
late
we'll give it a fill oh wow
I can't type I should go to bed so we'll
give them an opacity of 0.25 and escrow
let's give it a gray color obviously
I've prepared this so I know what to
type but it's still messy and a stroke
with two right so let's take a look at
this
okay so we have our circles and each
with their proper radius now we just
want to add some text so let's append
some text and the text will be a
function of our data we will just return
t dot name let's save
right so there's a couple of things we
need to do first of all we don't want to
show don't want to show the names of we
just want to show the names of the leaf
nodes and the childless nodes so the way
to do that is really really simple
actually
we just you'll recognize this if you've
worked with a JavaScript before but
otherwise I'll just explain it to you
real quick we'll do this and so this is
a short form for an if statement so what
this means is if the node has children
then set set there the text to nothing
otherwise and set the text to the name
property so the question mark and the
colon makes up this if statement if else
statement so if we save this and refresh
you can see that we only have labels for
the leaf nodes so let me pause for a
second
okay so once again we're in a hurry
but let me show you real quick how to
turn this into a bubble chart and so
there the only difference really and
between this and a bubble chart is that
you remove we only keep the leaf nodes
so the smallest circles we could do that
in a complicated way using something
called recursion but I won't go into
that now I'll just show you a another
way of doing that I've prepared another
set of data and yeah was lazy I just
called every object max but I I simply
created a data file composed of
one one array well one root node and
then an array of objects all at the same
depth so if we go back to index.html and
instead of loading my data dot JSON will
load my data to dot JSON and you can see
that now we have all these all these
nodes at the same depth but we want to
get rid of this root node and a circle
so we'll just have to create some
functions so let's set let's make the
fill a function of the data as well and
we'll say return if it has children and
then return white else return steal blue
let's save this and refresh right so we
just have to get rid of this stroke and
we'll just do the same thing here
we'll make this a function and we'll say
return if children then or what they get
if children then turn white else return
the greyish color
let's save and refresh and we have a
yeah
a kind of a bubble chart here going on
we could use a color scale on this to
make it look better and but what we're
showing here is just just the value
property really and that's the value
that we're visualizing so each of these
oh right so I think that will do for
this tutorial and I'll see you in the
next one