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

hey there i'm vno and in this eighteenth
video tutorial on d3 I'll continue with
the histogram layout that we created in
the last video and in this part I won't
explain every little detail of what I'm
doing since most of it is covered in in
other videos in this series but I'll
explain the part that are new so a the
purpose of this part is to style this
histogram up a bit
we covered the the basic principles of
the of the layout in the previous video
but we'll append an axis and make use of
some scales and just make it a bit
prettier in this part so first of all
let's increase the number of bins we
have some more stuff to play with
and I'll begin by erasing this these
manual adjustments of the dimensions of
the rectangles since we'll be replacing
this with scales I'll also create some
dimensional variables instead of
hard-coding it so we'll set the width
and height and give it some padding to
make room for our axis that will create
in a minute so we'll set the width to
the width and the height to the height
plus padding again to make room for the
axis so let's begin creating our scales
you can do that down here so VAR I this
will be the vertical scale which plots
the heights of each of each bar and as
you probably remember the height and
represents the number of values within
each interval so the number of persons
that has an age within this interval so
this will go from zero to and we could
do this manually by looking up at the
max so let's cause calm so that log or
histogram I'll show you what I mean
so our array here contains a number of
arrays each of these are the intervals
or the rectangles and the highest number
here is 17 the first the first range so
we could just say go from left the
domain go from 0 to 17 but we could also
do this in a fancier way and a better
way which would be to use the d3 max d3
max function which takes the maximum
value of any given array and we'll
supply this with another function and
the map function returns
so we'll say histogram that data and
this is just bonus material you could
you can just ignore this if it's it
looks too complicated so histogram data
and this will be a function that will
return the length of each array so the
length property is a property that every
array in JavaScript has and it refers to
the number of elements in that array so
what we're doing here essentially is
returning the length of each array and
handing in handing that over to the d3
max function which takes the maximum
value of that new array that we're
handing over to it so this basically
it has the same function as just writing
0 to 17 but it's computed automatically
for us so and the range will go from 0
to the height so let's pass on our data
to that scale okay something went wrong
do-do-do-do-do to do return length
height let me pause for one second oh I
screwed this up this is not supposed to
be data we're using the map function so
let's refresh so our Y scale seems to be
working good and we'll continue with the
X scale which plots the range of each
bin so the left border of each bin
represents the lower bound of that
interval and the X scale will also be
serving as the basis for our horizontal
axis that will be adding short in
shortly d3o d3 let's scale that linear
and the domain will let's just prepare
this the domain will go from zero to the
maximum age that we have in our data
since the right border of the outer
right rectangle will be further to the
right in our canvas so we can just do
this
d3 max and get the maximum age by
calling our map array which stores the
raw array of Ages and the range will be
from 0 to the width
and let's pass on our data to those
scales
and refresh okay looking good
whoo the next thing okay so what if we
wanted to flip over this whole
visualization instead of drawing from
the top to the bottom we we want to draw
from the bottom to the top well and the
way to do that is make the Y position
function of our data as well and this is
simply okay so at this point if we
return 500 what what does that mean it
means that each rectangle will be drawn
from this line here 500 pixels down to
the bottom and but that's not what
that's not what we want so let's
subtract from this the the height for
each bar
so we'll say Y D Y so what this
essentially means is that okay for each
bar the Y position is 500 down and minus
the height of the bar so we're going
let's say it's 200 for one particular
bar up 200 pixels and then we're setting
the height of the bar to the Y property
as well so it goes down 200 pixels for
that for that particular particular bar
so if we refresh this and we see that
the hole
all the rectangles are flipped over
right so let's add our axis x axis will
be d3 dot s Pechanga access the scale
will be the X scale and will orient this
to the bottom and let's append a group
for that let's just call it group and
we'll say canvas append G and then we'll
call our x-axis let's take a look at
this okay so we have our x-axis here but
we want to move it down so we'll just
transform it and we'll say translate
zero to the horizontal and then we'll
concatenate the height so we'll move it
down and tight and then like that let's
take a look at this okay so it's down
here looking good and we can actually
move everything a bit too to the right
as well so we'll say attribute transform
and this is to the whole canvas
translate 20 pixels
okay now for the last thing we want to
do is to append some text to each bar
and as with we can see that we can see
how many values it contains or how many
elements it contains so let's append to
the bar group some text
and the X will will just imitate the
bars functions here will return X DX and
for the Y position will return 500 minus
y dy and let's give it a white color so
that we can see it
and we'll set the text anchor to middle
and then the actual text will be a
function of our data and we'll return
DUI which is the number of elements
let's save and take a look at that
okay so we see that we have can see that
we have our text here but it's not in
this in the right place what we need to
do is move it move it down a bit and
that is accomplished by using the dy
attribute so we'll say let's say 20
pixels and take a look at that
okay but each of these are too much - to
the left so we'll move them to the right
a bit so let's make let's set the DX
property as well and since we know that
each and the width of each bar is a
function of the DX property or the range
we can for instance let the DX attribute
be a function of the data and we'll
return the DX D DX and divide that by
two so that way we get into the middle
okay looking good
so yeah like I said I didn't have time
to explain all the part all the details
here but most of it has been covered in
in other videos but that was the quick
overview of the histogram layout if you
have any questions please make a comment
in the comment section or send me an
email or yeah I guess those are the
options I'll see you in the next video