Vertical Brush

This example demonstrates how to use a d3 vertical brush with d4 to select items within a chart. This example is based off an older d3 brush example. Brushes in d3 are a means for selecting an arbitrary number of data elements within a chart. Typically this is done by creating a brush area and dragging it around the chart area.

The purpose of this example is to give a simple example of how you might tie in a d3 brush into a chart using d4. For more details on how brushes work consult the d3 documentation directly.


JavaScript Code
CSS

#brushable circle {
  -webkit-transition: fill-opacity 250ms linear !important;
}
#brushable .d4.selecting circle {
    fill-opacity: 0.2;
}
#brushable .d4.selecting circle.selected {
    stroke: #f00;
}