D3.js tutorial - 14 - The Tree Layout (1/2) Video Lecture - D3.js Tutorial

hi there this is veno back with another
d3 tutorial in this video I want to show
you how to create a tree layout in d3
such as the one that we're looking at
right here the tree layout has an a
hierarchical structure as you can see it
starts with the root node right here
which I called Max and Max has two
children nodes and each of those
children have children themselves so if
we take a look at the data behind this
you can see that it has a clear higher
hierarchical structure as well so yeah I
guess you understand what what this all
means so the tree layout is perfect for
these kinds for this kind of data where
you have you want to display
hierarchical relationships as opposed to
flat relationships if you will that we
used in our pie layout for instance so
if we take a closer look at what's going
on here d3 wise we can see that we
actually have three different aspects to
this visualization we have the labels
here which is which are just basic text
[Music]
text objects we have the the circles
right here and we have these lines
connecting the dots and the lines
perhaps is the most interesting part of
this layout these are actually paths
that we took a look at previously and
you can see that they're not just great
lines connecting the dots they're curved
in this nice way and I don't know the
math behind this but the nice part is
that we don't actually have to know the
math and d3 provides us with a path
generator which is called the diagonal
diagonal which calculates the distance
between the notes and returns a path
with this nice curve so I thought I'd
show you how to create this diagonal
curve in this first part and in the
second part we'll create this whole tree
layout so if we begin oops
I shouldn't have showed you that but
that's that's what we're striving to do
in this video so if we head back over to
our main and document right here
just as the arc path generator that we
took a look at earlier the diagonal is
used well it's used in the same way so
if we start by creating a variable here
and then the way we create the diagonal
path generator is really simple it's
just d3 SVG diagonal and okay so we have
our we have our path here but we need to
append it to the document just as the
arc path generator so the way we do that
is just as we did before we append the
path and let's just give it some basic
attributes we'll give it a fill of none
and we'll give it a stroke you can just
say black here and then the path data is
been generated from the path generator
so we call that diagonal so we'll just
write diagonal here that's the second
argument but what's special about the
diagonal path generator is that it
expects we need to provide it with some
data right and the way we do that is the
path generator expects two objects the
source object and the target object the
source object describes the starting
point of our path and the target
describes the ending point of our path
and
you would normally provide this provide
this data with well with data so you
wouldn't have to manually write out the
coordinates of the path but since
there's a for the purpose of this
tutorial we'll just provide the path
generator with the data ourselves so the
way we do that is we use two accessor
functions which are the source accessor
function and the target accessor
function and we'll just write as source
and target and like I said and it
expects objects with coordinates so
we'll provide the source object and the
source function first with an object and
let's give it some coordinates we'll say
x 10 + y 10 and another object here so X
let's say 300 + y 300 so this is the
ending point of our path this is the
start point so let's save save this and
refresh you can see that we have our
this nice curved line and the starting
point would be the one up here which is
10 pixels to the right and 10 pixels
down the document and ends right here at
300 through 300
so that's how you create this this
nice-looking curved path in d3 using the
diagonal path generator and as we'll see
in the next video this data right here
will be provided for us by the tree
layout that we'll look at in the next
video so we don't have to actually have
to have to write this out ourselves so
yeah I'll see you in the next video