Ordinal Brush

This example demonstrates how to use a d3 brush with d4 to select items within a chart with an ordinal scale. 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

  #ordinal_brush .selecting path {
    fill-opacity: .2;

  #ordinal_brush .selecting path.selected {
    stroke: #f00;
    stroke-width: 2px;

  #ordinal_brush .axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;

  #ordinal_brush .brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;