D3.js tutorial - 17 - The Histogram Layout (1/2) Video Lecture - D3.js

hi there I'm vno and in this d3 tutorial
I'll show you how to create the
histogram layout in d3 and I think this
is this is video number 17
so histograms are used for showing value
distribution and in preparation for this
video I prepared this ages CSV file
which contains let's imagine this is a
population of individuals we have the
name of each individual and we have the
age of that person and since I'm lazy I
just call them all max it doesn't really
matter
we're just interested in showing the
distribution of Ages within this
population so whenever we have external
data like this as you know by now we
need to load that data so I'll do that
like this and as you know by now our and
our data is stored in this data variable
so let's take a look at our data first
of all
we inspect this you can see that we have
an array of objects each with each
property and the name property but since
we're only interested in the age of each
person we want to create a new array
consisting of only the age values and
the way you do that in JavaScript is
using something called the map function
so I'll create a new variable here
containing our new data and I'll say
data dot map and this function goes
through each element in our array and
returns a new array based on our
criteria within parentheses here so I'll
create a new function and the I variable
here the argument of the function refers
to each element in our array so this is
just a side track to our histogram but I
think it's it can be good to know so
we'll say return I H which returns the
age property of each object so if we
take a look at this new data map
you can see that we have a new array
consisting of the ages but each a
problem is that whenever you load and
numbers from CSV files they are actually
returned as strings not as numbers so we
need to convert these to numbers and
that is an easy task for JavaScript
we'll just use the parse int function so
we'll say parse int H and if we refresh
this now we can see that we have an
array of numbers so let's create our
actual histogram let's call it histogram
and we say d3 layout histogram and then
we can specify the number of intervals
that we want to display and I'll say 5
here and finish off by specifying where
our data is coming from and you do that
like this so if we take a look at our
new data here at the histogram and
variable and refresh you can see that we
are returned with an array of arrays and
each of these well you can see first of
all that we have five arrays here which
corresponds corresponds to the value
that we supplied the bins method with
and each of these represents an interval
of values and
so as you can see the first array
consists of 20 values the second one six
values and so on and if we take a look
at one of these you can see that they
have first of all we have all a number
of values but we also have a DX property
an X property and a Y property this is
something that the histogram layout
automatically calculates for us and what
this mean is first of all the DX
property the DX represents the range or
span or width of each array or each
interval so if we take a look at the
next array this one has a span of 17
point two and this one has the same span
and that is because the histogram layout
per default splits splits our data in
uniform intervals if you will
so this well this first array goes from
zero to 17.2 all the ages all the data
elements within that range the next one
goes from 17.2 to whatever 17 point 2
times 2 is and so on and the X property
stands for the lower bound in oh can you
hear the ice cream truck the X stands
for the lower bound over of this array
so this one starts with 0 and the next
one starts with 17.2 right and yeah so
so the the number 17 point 2 is not
actually represented in the array but
the range goes from 17 point 2 and so on
the last property the Y property
contains the number of values in each
range or each interval so those are the
three additional properties that the
histogram layout provides us with and
now I'm just going to show you real
quick how to actually visualize this
data and and I think we'll have to wait
for the next video to make it pretty
but yes ok so and we have our data here
what we need to do next is well first of
all create our canvas so we'll say for
canvas and you've seen this a million
times so I don't have to explain this
let's just give it a width
okay so let's bind our data to the
document will create a G element for
each data element that we have
so we'll say select all our data is
coming from histogram enter and then
we'll append the G element now to each G
element will append a rectangle which is
the actual bar so let's say bars dot
append rect and here we need to specify
the properties so this is where the
interesting parts comes in
first of all let's give it an the X
property which is the horizontal
coordinate and since SVG starts drawing
from the top left corner we can let's
just make this basic histogram and to a
number of bars going from the top to
bottom so the x position would be the
lower bound of each bar sorry the lower
bound of each bin or interval so the
first one will be drawn from zero right
here to the left the second one will be
start will start drawing from 17 point
two and so on so we'll just make this a
function our data
and we'll set this to return the X which
stands for the lower bound and then the
Y will also be a function and since what
we want to show with each interval or
each bar is the number of persons that
has an H within that interval we want to
make the height of each bar a function
of the number of values in that interval
or in within that bin so we'll return
the Y property next we need to set the
width and the width will be also a
function and that will represent the
range or span of each bin and since
they're all uniformly they have the same
range we'll just say return the the DX
property which stands for the range and
finally we'll set the height to
oh sorry I I made a mistake here each
bar will be drawn from the top so we'll
just say zero here but the height of
each bar will be a function of the
number of values within it so let's
return DUI here and if we save this and
refresh we have a we have our histogram
here but it's not it's not really
visible let's first of all give it a
nice a nice nicer color say steel blue
and just to show you what what this
looks like I'll just multiply this so it
gets a bit bigger
something like that and a refresh and
you can see that we have our histogram
here you can't really tell anything
right now we need to append an axis and
some values to each bar but that was the
basic principles behind the histogram
layout and in the next video we'll style
this a bit so I'll see you in the next
video