D3.js tutorial - 11 - Paths Video Lecture - D3.js Tutorial A Complete Guide

hello there I'm VNO and this is my
eleventh video tutorial on d3 in this
video I want to show you a component a
new component of SVG that we haven't
looked at before which is the path
component and paths are just as
rectangles and circles it's another
element that SVG provides us with but in
contrast to rectangles and circles paths
can actually be used to create any shape
whatsoever that we would like to have so
I wanted to begin by showing you what
paths look like looks like in the actual
source code so if we inspect a
visualization right here we can see that
it's actually made up of a number of
different paths and the path data is
stored in the D attribute so I won't
I won't go into what this actually means
but this long string the value of D
attribute this describes what the path
looks like so I think this yeah this
first path describes this circle right
here
but this is really complex and it would
take forever to write this manually
thankfully d3 provides provides us with
a number of so-called path generators so
yeah I'll show you what that looks like
in in just in just a minute but keep in
mind that it is the it is the D
attribute that actually stores the path
data so if we head over to our text
editor right here let's say we wanted we
have we have some data and we want to
draw a line on our webpage using that
data first of all we need some data so
let's create a simple array and since
lines are basically just a number of of
x and y-coordinates we'll create a data
array consisting of a number of objects
each having two properties a an X
property and a Y property so let's give
this some random numbers
ya know
okay so we have our data and let's also
create a group element so we'll say
canvas append G and let's give it a
transform so that we're sure that we can
actually see it
okay so the problem for us right now is
that we have this data but we need to
translate it to that weird D at should
be attributed string that we saw earlier
what we need to do is well first we can
bind our our data to our path and you'll
recognize this you'll just select all
paths of which there are none and then
we bind our data to that path this is
this will be a bit different since we
don't want one path for each data
element in our array we just want to
pass this whole array and create a
single line out of it so the way we do
that is simply to pass in the array and
the data as an array like that and then
we proceed by using the enter method and
we append a path
now as we saw earlier all that path data
is stored in this D attribute so we
could just provide this with a long
string of all the the path data like
this it would be super long but instead
we will refer to our our path generator
that d3 provides us with so I'll create
a variable called line in just a second
that will translate our data to this
path data and string so let's do that
right now
var line and since in this case we want
to create a line we will use the line
path generator which is created by by
writing d3 SVG dot line and this
function has or this method has to what
I call them accessor functions first of
all the X function which
I guess represents each x coordinate of
our line so we'll make this a function
that will return each of these X
properties right here so we'll return
the X and the same thing goes for the Y
accessor function and we'll return the Y
so this line right here so what we've
done so far is we we found our data to
our empty selection as usual and then we
created a path element for each data
element and since we provided the data
as an array we only have one element so
we we just create we create one path
then we give all our data to this path
generator which translates this data
right here into one of those strange
path data strengths that we saw earlier
so we also need to give this a we don't
want any fail so we'll say fail none
but we'll give it a stroke so we'll just
get this thin line no Stroh
that's right stroke let's give it the
color of black and we can also give it a
stroke width of say ten so let's save
and hope hopefully this works
nope okay let's see here
let me pause for a second okay so this
this can actually provide a good example
of debugging in d3 so if we if we wanted
to find out what's wrong what why our
visualization is not showing you can
just head over to our browser and
inspect and look at the console and
we'll get this error message syntax
error unexpected token left square
bracket at line 17 so let's take a look
at that and at line 17 we immediately
see that we don't have any equal sign so
let's save this again and refresh and
you can see that we have our our line
here which is actually a path so if we
inspect this you can see that this is a
path and we have this data path string
or whatever you want to call it the D
attribute which essentially is our data
but translated to
a path string so that is the very very
basics of creating paths in d3 I think
well at least my plan is that in the
next video we'll take a look at a
slightly more complex path that we can
create in d3 and that is well I won't
tell you because I'm not entirely sure
that I will speak about that but yeah
I'll see you in the next video