Brushing selects a one- or two-dimensional region by clicking and dragging across a visualization. It can select elements, zoom to a region, or filter data over time. section 13.4
A timeline brush turns a year range into an interactive filter. D3's brushX() creates a horizontal brush; extent() defines its bounds, and a brush listener receives selection changes. section 13.4
A practical D3 brushing workflow is:
- Create a timeline with an x-scale covering the minimum and maximum years. section 13.4
- Configure brushX() with the timeline extent and attach a handler to the brush event. section 13.4
- Convert the selection's pixel boundaries back to years with xScale.invert(), then update the displayed marks. section 13.4
Filtering a laureate map by year
A world map of Nobel laureate birthplaces uses a timeline brush spanning 1901–2022. Brushing a narrower range filters laureate data and updates country fills or city circles; the selection rectangle and handles show the active range. section 13.4
Listing 13.17 Adding the brushing functionality (map-world.js)
...
import { brushX } from "d3-brush";
export const drawWorldMap = (laureates, world) => {
...
const handleBrush = (e) => { #1
console.log(e);
};
const brushHandler = brushX() #2
.extent([[0, 0], [tlInnerWidth, tlHeight]]) #3
.on("brush", handleBrush); #4
yearsSelector #5
.call(brushHandler)
.call(brushHandler.move, [xScale(minYear), #6
xScale(maxYear)]);
};
Inspect the complete brushX() setup, including its extent, brush listener, attachment to the timeline, and default full-range selection. section 13.4
