In this video, I want to talk with you on how can we add Zoom to our page.
By Zoom, what we mean is that you have
two options: One option is to just make thing bigger.
So, think about accessibility.
So, you select a region,
and then you make the thing larger,
so is easier to notice details that we have on that specific visualization.
So, that's one option.
But we also have an alternative solution.
In this alternative solution,
what we do is that we actually manipulates the scale.
So, when we zoom,
what we do is not that we make things bigger,
but we make the space bigger so we can see more detail.
So, we see that now in the second options,
the dots are moderately spread because we changed the size of the scale,
and if you look in the top,
we have this small portion now is covered by this large portion.
So, we have more details on the axes.
We can get more information and read the information more accurately.
So, that's one option to use Zoom,
and most of the time it's the one that we are going to be using because by doing that,
we can actually provide with the user more information.
It's not just making easier to the user to see what was there already but it's
actually drawing the chart in a way
that now is easier to the user to read the information.
The way we do that is by using a behavior API from d3 called d3.zoom.
d3 will create all the elements and bind all the events that we need,
in order to make the Zoom work.
Basically, what the Zoom does is add the listener to listen to the wheel of your mouse.
So, if the user scrolls up and down,
so now d3 will listen for that and will be able to zoom in and zoom out,
or the user can also pan,
that is, the user can click and drag around,
and move around the space,
so think about as a camera looking around your visualization from closer.
So, those are some of the events that d3.zoom we're going to be listening
and going to help you to deal with and
manipulate your visualization to react to those changes.
So, to create that,
the first thing that we do is create our Zoom behavior,
and then we select the group.
So, here I'm actually selecting my svg,
and I gave it an ID.
So, that's just to make sure that the Zoom will work in any place of my svg.
I select it, I do.callzoom and I'm done.
Now, I already have the listener reacting to all the events in my svg.
The problem now is that I am not reacting to those events.
So, I have to write codes to react to when
the user do something that is related to zooming,
and to do that, we can add an event called onZoom.
So, this means that every time the user do something that is supposed to change the Zoom,
we're going to call this function.
One important feature of this function is one thing that come on the event,
so d3.event, that, again,
contain informations about the event that just happened,
and one thing inside this thing that is really helpful is the transform object.
The transform object has two functions;
one is to give me information on where I am,
so what's the scale that changed in the zoom,
and if they use a pan,
what's the translation, what's the x and
y that has been translated from the original position?
But they also provide some helper functions,
and one that is very helpful is the rescale.
So, you can ask the transform to rescale the scale that you already have.
So, for example, I had an xscale when I draw my visualization.
Now, what I want to do is to pass this to the rescale X,
and rescale X will return me
a newer scale based on the informations of panning and zooming,
so now, I can use this newer scale to draw my data,
and I basically going to get the data drew in
this new space based on the zoom and the position that the user changed.
You can do the same thing for the yscale.
Once I have those scale,
I can work using the same techniques that we have seen to update our data,
to just update the scales and get a new state of my visualization.
