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. The transform will also contain three information that is important. K will represent the scale, that means, how much I change for the original scale. One is the initial scale, and then numbers that are below one is basically the user is getting further apart, and number that is smaller than one, the user are getting closer, so you are increasing the scale, or reducing the scale. The translation is, basically, where the user moved, if the user panned or did something like this. Sometimes when we scale, because the way scale works, you may also pan a little bit around the original region, so you're going to need just two informations to draw the newest state of your visualization after the Zoom action that the user performed. So, Zoom is a very helpful technique in order for us to get details of your information. You can use Zoom to zoom into dots, for example, you get see if there are better clusters of dots. You can use Zoom to zoom into line charts, for example, to look in a specific section of your line chart. You can expand and then focus on that specific region of your charts to see more details. So, as I said, it's much more common to change your scales, or to reposition your elements based on the Zoom than actually just increase the size because then you can provide more context information and more detail shared user when the user is zooming harder than just make things bigger. That's the whole idea of changing your scale to get a new state of your visualization, instead of just making it bigger.
