In this video, I want to show you how you can implement brushing in your visualization. So, by brushing, imagine the situation that you have visualization like this, and you want to select those two dots on the top. So here, it's easier, you could just click on both of them, but what about if you have thousands? That won't work because you don't want the user to click thousands of dots. So, to solve this problem, we have brush, and brush is basically the keys where we're going to use our mouse, and you're going to click and drag, and by dragging, we're going to create a square region or a rectangle region that's we're going to select everything that is inside this region. So, we're going to have to implement two things. One is the function that creates this square and draw as the user drags, the other one is the one that detects which data points going to be highlighted, or selected, or based on this region that the user just created. So, to help us with that, especially with the first one when we created this region here, D3 has the brush API and that's what we're going to be using here. So, if I go to this code, what we have here is basically, the code you created is scatter plot so, you're adding new elements every time we have a new data point to show. We are using the merge technique to update both at the same time, the new elements and the old one, and we are also creating our axis here on the bottom, and the data is basically weights by height, and we want to select the user's using brush. So, d3 provide us this API and we're going to add the API here on our load function. Again, you have to choose where you're going to put your functions. Specifically for this case, it's easier to add the brush here because we are calling showData most of the time from here. But, you may think of adding showData as well, but you have to be careful to not keep creating multiple brush objects, or you would maybe able to add even outside that but for now, I'm grouping out the functions that doesn't go inside showData but somehow read or update the data, I am putting them inside my loader here. So, we're going to create first the brush element, that's going to be what we call our behavior. So, behavior are functions in d3 that add some interaction to your visualization, and that one has the goal of adding brush. So, also we have that, we can apply this to our group so, we're going to create a group here on the body, and you're going to add the "g". Once I add this "g", what I'm going to do is I'm going set the attribute class for as "brush" because then, I can access it later if I need, and then finally, I'm going to call my brush object. That's it. If I come here now, my mouse already changed shape. It has a different shape and now, I can click and drag, and I get my square out those I don't have the points being highlighted yet, but the first step of my brushing interaction is already done. So, we just have to use those lines. So, the first one is creating this behavior. It's basically something that knows how to add the brush to our visualization and then, you just call that to some SVG element. Most of the time, you're going to be calling that to a g, and here I am doing a trick here that is I'm first calling showData. So, I make sure that everything that is inside here is added first and then, I am adding my brush on the top. So, if in this case I wanted my brush to be before behind my data, I could just change the order and move showData later, because what's happening here is that, whatever order I add is "g" that are going to have the brush, you're going to be the order that the square here is going to appear because this square is being created inside the "g". Okay, that's great. So, we have our brush. We have to move to step two, that is how I detect the data points? How I for example, highlight them if I knew? So, one way to do is using the events of the brush. So, you can say brush, and the same way you have events for SVG when you can do click in this kind of thing, you have events for brush as well. So, brush and not in, on. So, this means that every time a brush happens, and I can call some function, and which functions I'm going to call? The first thing that I have to do is, I want to select all the circles that I have here. So, again, you could use different approaches for example, you could use the data information to create that. But since, the information of "g" is in pixels, and if I get the circle, the position of the circles are already pixels is easier for me. I don't have the scales or anything. So, for that reason, I going to get those circles back so, I'm going to do body.selectAll(circle). So, this means that I'm going to select all the circles that are in the screen and then, what I'm going to do is I want to change the style. I want to show a different color if they are behind my square. If they are being selected by the brush function and, the way I'm going to do that, and we have to use a function here. So, the way we're going do is first, we need to capture the position of the circle. So, we're going to create a variable cx that's going to be equal d3.select(this), and what happens when I do d3.select(this) is basically, I create a selection of the circle. So now, I can use all the d3 functions that I'm used to with this. So remember, if this is the node, and I would be able to use only the functions that subscript make available for me, but now because I wrap it in the select, I can use any d3 function, and I just want to read one attribute that is cx. I can just copy the same line just changing x to y, to now read cy. So now, we know the position of the circle. The next step is to know which region is selected, and to get the selected region, you're going to create a variable here selected, and go we're going to call a function called isSelected, and isSelected is a function that we implemented here that's going to tell if some data point is selected or not. It basically receives as input coordinates and those coordinates are x, y, x0, x1, y0 and y2, and y1, and it's basically the position of the corner of the square, and the position of this corner of the square. So, you're going to use those positions to refer the square, and then compare with the x and y of the circle to know if the circle is inside the square or not. So, that's what this function is doing. It's basically comparing if things are smaller or greater than something else, and decide and if the circle should be selected or not. If the circle we selected, it going to return through. So here on the top, where we have we're calling isSelected, we have to give the coordinates, and how do I get the coordinates that is selected? So, one way is using the event selection. So, remember that three event contain information about the event that just happened, and this information sometimes may change from one event to another, and specifically the brush has one option that is called selection. They're going to return me this exact coordinates that I need. So, I can say, "coords = d3.event.selection" and now, I have my coordinates. So now, I can use select coordinates. I can pass the x and y informations cx, cy and now, I have information if the dot is being selected or not. So, our next step is to actually return a color based on that so, you can just do return if it's selected, we're going to return red. If it's not selected, we're going to return blue. So now, if I select, you see that as the circle is inside the square, we get a new color, and we get red. So, if I select those two on the top, and now I can just drag, and select those two and they're going to change to red, and what about if I want to use the data points that are here and compute something? The exact same function would work because we have the selected function and here, we are receiving the d that is the data point so, it could just do something else with just d to decide what to do with this information. You could filter, and so on. So, that's it. That's how you can the add brush, and brush is really used for especially when you have scatter plots like this, or when you have line charts showing for a period of time, and you want to select the region of the time. Because brushes doesn't have to be y and x at the same time. Maybe, you can just do a brush in the x axis or just in the y axis, it's up to you, but it's very simple. You just use those behavior functions that allow you to add the brush behavior to your visualization.
