D3.js tutorial - 6 - Groups and axes Video Lecture | D3.js Tutorial: A Complete Guide - Web Development

hello there I'm vino and this is my
sixth video tutorial on d3 in this video
I want to show you two things and the
first one is how to group SVG elements
together so that we can apply can
transform them as a whole and the second
one the second thing I want to show you
is how to add an axis to our bar chart
so if we take a look at our bar chart
here we can see that one obvious thing
that is missing is an axis down here to
display the values of the bars right we
can see that they are different in width
but we can determine how we have no like
ruler if you will so first of all let's
let's take a look at how to group SVG
elements together the way we do that is
by using the the group element which is
a component of SVG so the way you
first of all let's we head back over to
our canvas variable here and we can
simply append a new element and that is
the G element which stands for group and
if we just save here and take a look at
at the bar chart nothing has changed but
if we look at the source code you can
see that everything in our SVG container
is contained within two G tags so within
this group that we've created and this
allows us to apply transformations to
the whole group to all of the four
rectangles that we have in our bar chart
as of now so
let's do something let's we can make use
of a new attribute which is the
transform attributes and the transform
is used to for things like moving the
group to the right moving it down the
page or rotating it and those kind of
those kinds of things so the way to
let's say we wanted to move it the whole
bar chart like we wanted to move it down
a bit and a bit to the right the way we
do that is make use of translate
property or function and we just type in
the values the number of pixels we want
to move it first of all in the
x-direction that is the horizontal
direction let's say 50 pixels and the
vertical direction let's say 50 pixels
as well and Save
and refresh and we can see that the
whole thing moves down and to the right
and as you can expect if we take a look
at the source code our group element has
this new property that we're translating
it as its called
50 pixels to the right and 50 pixels
down the page right so we are going to
make use of this when we're adding our
axis to to our bar chart we can change
these values to make room 20 and 0
should be okay that looks good okay so
the way you add in access is simply
let's first create a variable you simply
type d3 SVG . access and we need to
supply we need to hand over a scale to
the axis to for it to be able to know
what values to display right so we
simply use the scale method of the axis
object and we define we specify what
scale it is it should use so if we save
here nothing will actually change and
that is because we have to call our axis
to add it to the
the bar chart and the way we do that is
simply use using the call method and we
call our axis within parenthesis and if
we save now we can see that we've got
this axis here displaying the values so
since this is our data set it goes from
5 to 60 we can see that they it's
displaying the proper values right
because this one is has the value 5 this
bar and it ends right here and this one
goes up to 60 so perfect but it looks
kind of bad when we want to move this
down here so that it's not blocked by
these our bars and the way we do that is
use a group element so we can remove
this call here and we can just create a
new group so
let's see here canvas append
we append a group and we give it a
transform
translate
and we want to move it down right so the
exposition stays the same
let's give it zero but we want to move
it down say four hundred and to this
group we append or call our axis all the
axis and finish off with a semicolon
save and refresh and we can see that our
axis has been moved down 400 pixels yeah
I guess that's well I want I can also
show you another let's go back to our
axis here we can actually you can see
that the default number of ticks as
they're they're called these different
values is I don't know what the default
is but yeah I think it's ten right here
we can actually change the number of
ticks say if we wanted less ticks we can
use the ticks method in to our axis
object and just specify a number here so
let's say five and say
and if we if we refresh here you can see
that we have five ticks instead of ten
so yeah that's how you add access access
to your your charts I'll see you in the
next video