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

d3-brush

…

Installing

If you use NPM, npm install d3-brush. Otherwise, download the latest release. You can also load directly from d3js.org, either as a standalone library or as part of D3 4.0. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3_brush global is exported:

<script src="https://d3js.org/d3-color.v0.4.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v0.4.min.js"></script>
<script src="https://d3js.org/d3-ease.v0.7.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.8.min.js"></script>
<script src="https://d3js.org/d3-timer.v0.4.min.js"></script>
<script src="https://d3js.org/d3-selection.v0.7.min.js"></script>
<script src="https://d3js.org/d3-transition.v0.2.min.js"></script>
<script src="https://d3js.org/d3-drag.v0.2.min.js"></script>
<script src="https://d3js.org/d3-brush.v0.1.min.js"></script>
<script>

var brush = d3_brush.brush();

</script>

Try d3-brush in your browser.

API Reference

# d3.brush()

…