The three also provide us with some advanced techniques to provide interactions to the user. And one of such techniques is what we call brushing. And by brushing, imagine a situation where we have a scatter plot like this and you have those dots in the middle and you want to select them. So it's nice if you can just click and drag, and create the region, and tell the system, okay, that's the region that I want to select. That's much easier if you have hundreds of dots there. You don't want the user to keep clicking in each dot. So brushing is a very reliable technique to do that and is very simple as well to implement this feature. And the first thing that you going to need is the behaviors. So they pre-provide us with some behaviors that's what adds some complex interactions to our applications. And d3.brush is one of those behaviors, and is able to create and manipulate and make sure that everything that you need to brush is in place. So we just do d3.brush and we get our behaviour, that's what we need. So, for example, here I'm creating my brush object and then I am using d3.brush to create this object. And then finally, I am selecting a group on my visualization. So usually the behaviours we're going to append either to a group or the itself. So if you want the behavior to work in some specific region, you may want to add to a group. So one of the reasons why we add the brush to group is because it allows us to control the order that you're going to show the square. And what I mean by that, so imagine that you have your visualization, and now you have your dots. Those are the dots that you are showing your visualization. So if the user is brushing, you're going to draw a square. And you have two options, you can draw the square on top of those dots, or you can draw the square on the back of the dots. And the way I decide if it's on top or on the back is basically the order that we have for the group. It's basically the order that we created the group to which we are adding the brush. So here I'm selecting a group. I created this group somewhere. And now I'm selecting this group by using its ID. And then I do .call(brush) and I am done. That's all I need to make the brush work. So if I go to my visualization right now, I'm able to Click+Drag and I'm going to see a square happening in the screen. But now we have the next problem. That is, okay, so, now, it created a square, excellent. So, now, how do I get the dots that are behind the square? That's where we have implement and it's not that complicated because d3 will provide us with an event that's called brush. So, this means that you can do brush.on and you're going to list in for brush and that just basically mean that the user is drawing the square. So, every new update of the square we're going to be calling this event. And the first thing that we need is from the d3 event. So, remember, d3 event contains information about the event that just happened. And for the brush, one of such information is the selection. And the selection is basically the coordinates of the square that the user just drew. So using those coordinates, now is much easier. I can just check if the position of my dot is we think is the square. And if the position of the dot is inside the square, I am done. I know that this dot has been selected. And how these coordinates work? d3 will provide me two coordinates. One is the top left of the square, that's going to be, so you are going to have an array. The first element of your array is also an array with two values, that are basically the x and the y of the top of the square. And then the second element of array is again an array with two values that is the x and the y of the bottom right coordinate of your square. And by using those two coordinates, I can get any other information, like the width of the square, the height of the square, the position of the square on the screen and then decided if a dot is or not inside these coordinates. If I want to get the specific coordinates, remember that there's two arrays. So at first we're going to use, for example, choords, imagine that coord is my coordinates. 0 to get say, I want to look in the top corner. And then I can again select my next element that's going to be either x and y depending on the information that I'm looking for. So remember brushing is interesting technique when we want to select visions and it doesn't work only for element like dots or squares. It can also work for line short. If you have a line short you can brush in one access and select the specific division of the line short to either zoom in or show the details of that specific region. And once again, I just have to use the selection of d3 to define where is the selection that the user created. And then decide if my data points are or not inside that specific region.
