D3.js tutorial - 4 - Visualizing data Video Lecture | D3.js Tutorial: A Complete Guide - Web Development

hello there I'm vno and this is my
fourth video tutorial on d3 in this
video we'll take a look at how to
actually bind data to our visualization
or in other words actually visualize
data on our webpage using d3 so in the
previous video we take we took a look at
SVG with it which is an image format for
displaying graphical elements on our web
page and in this video we'll use SVG to
to visualize a basic data set so first
of all we'll just erase this will keep
our canvas element since we need a
canvas to draw our are our visualization
right so usually when you visualize data
you have a large data set in a file
somewhere
an s-u-v file or a JSON file there are
different file formats for storing data
but for the purpose of this tutorial
we'll just create a our own data here so
we'll create a new variable called data
array which is will be an array and if
you don't know what I'm what an array is
it's just a simple collection of data
you can think of this as since we have
three elements in our in our data array
here this is basically this is kind of
like three different variables but
stored in one one variable yeah so let's
say we want to visualize this data we
can do this in a number of ways we could
display a circle for each datum we could
yeah we could do it in a vast variety of
ways but in this case let's say we
wanted to make a simple bar chart so
each data point here would be
represented by a bar let's begin by
creating a the bars variable and we
start out from the canvas variable of
which art which is defined here now this
is where some strange things begin to
happen and this will be very confusing
to you and I think most people are
utterly confused by this there are
several steps here which may seem kind
of weird in the beginning but after a
while you'll get the hang of it let me
try to explain the best I can and then
you can just like sit in a like your
favorite chair and just contemplate
about this a first step is to select all
this is a new method we use select all
is similar to the select method which we
looked at previous but it selects all
elements that we specify like yeah in
here between the brackets and the quotes
so since we want to create bars ours are
basically rectangles right so we're
selecting all rectangles but this is
weird right
we cut because we don't have any actual
rectangles on our page so what this
method does in this context is returning
an empty array or an empty selection
but it's it's still useful because we
can use that empty selection to bind we
can connect it to our data and that is
done using the data method and within
brackets we specify where our data is
coming from and in this case we have a
variable set up here containing our data
so we just specified that our data comes
from the data array variable yeah so so
far we've found our data to an empty
selection the next step is the enter
method
[Music]
this method returns placeholders for
each data element for which there are no
corresponding elements i mean doom
elements on the page so yeah that's
that's weird
but let's say we we actually had two two
rectangles already on the page then this
data method here would bind them to like
we're selecting all the rectangles so
let's say there are two rectangles and
the data method binds our data right
here to those rectangles but the enter
method contains placeholders for each
data point or each data element for
which there are no corresponding doom
elements I mean and that is rectangles
on our page but since in this case we
don't have any rectangles at all we our
entry method contains placeholders for
each and every data element so we
returned with three placeholders for
each of these values right here
so that's confusing I know but let's
continue anyways yeah so so now that we
have our enter selection this returns a
new selection that we can do stuff with
so we have a selection containing three
placeholders
now for each I'm just gonna indent this
this is how I like to do it for each of
these placeholders will append a
rectangle right because we want to
append a rectangle for each data element
or a bar for each data element okay so a
pend rectangle and we want to give it
some some attributes so let's begin by
specifying the width the width and
previously we just heart and hard-coded
this and we just typed out a value like
this but in this case we want the width
since the width will be the value the
property that that displays the today
the data that we have we want the width
to be a function of the data so instead
of just typing out a value right here
like this any value will use a function
and if you if you have no idea what a
function means I'm sorry but I don't
think I have time to explain in detail
of what it means right now you can
google it how functions work in
JavaScript but I said essentially it
takes an input does something to it and
returns a value of some sort
so let's return
[Music]
Yeah right when we have this data we can
give the function in an argument D
whatever you even call this whatever you
like but the standard is D so d stands
for each data element that we have in
our placeholder selection our inter
selection so we can return D simply here
so we'll return for each data element
that is within our end reflection the
width of our rectangle here that we
append will be a function of the data so
the first the first bar will be 20
pixels wide the second one 40 pixels
wide and the third one 50 pixels wide
and this is similar to a loop if you've
dealt with loops before it goes through
all the data elements and for each data
elements it returns the value of that
data and and assigns the width of the
rectangle corresponding to that data so
let's also give it a height let's say
each
no we can just say that each rectangle
rectangle will have a height of 50
pixels and let's let's take a look at
how this looks
so we head over head over to our browser
and refresh when Jake we just get this
blob and that is because we need to
separate since SVG starts drawing from
drawing from the top left each rectangle
is placed upon going in the same place
so the biggest rectangle covers the rest
of them so we need to give them
additional properties let's give them Y
property which is the vertical
coordinate let that be a function of the
index and this is another thing you just
have to get used to since we have this
placeholder selection the functions the
first argument contains the data 20 40
50 the second one contains the number
the index of each data so this is the
first one the second one and the third
one
so let's since I stands for index we can
return I times let's say 100
and let's save this and refresh and we
see that the distance between each
rectangle and the vertical distance is
100 pixels well you don't see that but
it is so this is 50 pixels tall since we
that's what we specified here in the
height and after since the distance is
100 pixels there's a 5th to Pixo gap
between each rectangle but it doesn't
look very good right I have the they're
really tiny and you can hardly see the
difference between them so let's here in
the width property we can return d x
let's say 10 so it will return this
value here for each data element times
10 so 20 will be 200 and so on let's say
Oh
save and refresh and we get a I mean
we're getting somewhere this is yeah
it's a very basic ugly looking bar chart
but at least we have a bar chart and the
bar chart is powered by our data element
here but so yeah in the future this data
variable will be replaced by a larger
data sets probably in an external file
somewhere
yeah that's that's the that's it
that's an introduction to displaying
data using d3 and I know it's very
complicated
but yeah you it it just takes a lot of
practice and thinking so yeah I'll see
you in the next video