Using brushes to select elements

For this last section in the chapter, we're going to look at how you can easily select an area on an SVG element using a d3.brush. The easiest way to understand what a brush does is by looking at an example. If you open up the example <DVD3>/src/chapter-08/src/D08-06.js in your browser, you're presented with 200 randomly placed symbols. When you use the mouse, you can left-click and select an area. The square you see is a d3.brush:

You can easily resize and move this d3.brush without any customizing using the mouse. For this example, we used d3.brush to select the symbols that fall within the area and highlight them. We'll explain the code to do this in the following sections. The first thing we do, for this example, is create the set of 200 symbols and color them just as we did in the beginning of this chapter:

var symbols = [ 
    {name: 'Cross',...