d3-brush

What is d3-brush?

The d3-brush module is part of the D3.js library and provides tools for creating interactive brushing and linking in visualizations. Brushing allows users to select a region of a chart or graph, which can then be used to highlight or filter data.

What are d3-brush's main functionalities?

Basic Brush

This code sets up a basic brush on an SVG element. When the user interacts with the brush, the 'brushed' function is called, logging the selected region.

const svg = d3.select('svg');
const brush = d3.brush().on('brush', brushed);
svg.append('g').attr('class', 'brush').call(brush);
function brushed(event) {
  const selection = event.selection;
  console.log(selection);
}

Brush with Custom Handle

This code demonstrates how to create a brush with a custom handle size. The handle size is set to 10 pixels.

const svg = d3.select('svg');
const brush = d3.brush().handleSize(10).on('brush', brushed);
svg.append('g').attr('class', 'brush').call(brush);
function brushed(event) {
  const selection = event.selection;
  console.log(selection);
}

Brush with Extent

This code sets up a brush with a specified extent, limiting the brushable area to a 400x400 pixel region.

const svg = d3.select('svg');
const brush = d3.brush().extent([[0, 0], [400, 400]]).on('brush', brushed);
svg.append('g').attr('class', 'brush').call(brush);
function brushed(event) {
  const selection = event.selection;
  console.log(selection);
}

Other packages similar to d3-brush

d3-selection

The d3-selection module is used for selecting and manipulating DOM elements. While it does not provide brushing functionality, it is often used in conjunction with d3-brush to handle DOM selections and updates.

d3-zoom

The d3-zoom module provides tools for enabling zooming and panning on visualizations. It can be used alongside d3-brush to create more interactive and dynamic visualizations.

crossfilter

Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. It provides filtering and grouping functionalities that can complement the brushing capabilities of d3-brush.

README