Click-to-Recenter Brush

100%

Click-to-Recenter Brush

✓ Published0🌍 Public

Last edited Aug 8, 2019

Created on Sep 9, 2013

A click-to-recenter brush demonstrates a modified brushing interaction for scatterplot data. By default, dragging outside an existing brush selection creates a new selection; here, it instead repositions the brush so it remains centered on the pointer. The chart plots 800 random points with `d3.randomUniform` and `d3.randomNormal`, rendered as SVG circles with a linear x-scale. The customization uses `d3.brushX`, replacing the overlay’s interaction type with “selection” and adding a `mousedown` handler that calls `brush.move` to recenter before brushing.

AI-generated description

By default, clicking and dragging outside the current brush selection drags a new selection. This brush has been modified such that this interaction instead recenters the brush.

This customization is implemented by changing the type of the brush’s overlay element from overlay to selection so that clicking and dragging on the overlay element behaves identically to clicking and dragging on the brush selection. (The overlay element is the invisible rect element that receives pointer events when clicking outside the brush selection.) When the overlay is clicked and before brushing starts, the brush is recentered around the pointer, such that the brush remains centered around the pointer during brushing.

This technique can be composed with snapping on brushend if desired.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Click-to-Recenter Brush II

A scatterplot of 800 points uses a horizontal brush to highlight selections in red. Clicking the background recenters the brush around the cursor, using `d3.brushX` with a fixed width, while a `brushended` handler snaps the brush extent to integer values on the x-axis via `Math.round` and `brush.move`. The SVG rendering uses `d3.scaleLinear` for axes and a transition animation on brush movement.

Mmbostock

92% match

Loading thumbnail…

Click to Select All

A scatterplot displays 800 randomly generated points positioned across a linear x-axis and normally distributed y-values. Clicking and dragging outside the existing selection normally creates a new brush, but this modified behavior selects all points instead. The visualization uses D3 v4’s `d3.brushX` to handle brushing, `d3.scaleLinear` for axes, and SVG circles with red fill and brown stroke for selected items. A transition animates the brush movement when the user activates the select-all interaction.

Mmbostock

86% match

Loading thumbnail…

Brush & Zoom II

This example demonstrates how brushing a scatterplot with d3.brush zooms to the selected region, while double-clicking resets the view. The code generates 900 random points in three gaussian clusters, rendering them as colored circles and using a linear scale to map coordinates. The brush’s `end` event updates the x and y domains, then animates the axes and points via `transition`. A 350ms idle timeout distinguishes a brush clear from a double-click reset.

Mmbostock

82% match

Loading thumbnail…

Brush Handles

This example shows a scatterplot of 800 random points on a linear x-scale, with a draggable d3.brushX selection. Custom semicircular path handles are attached to the brush’s west and east edges, letting users resize the selection by dragging these visible arcs instead of the invisible brush boundary. The brushmoved handler updates the handle positions and highlights points inside the selected range. It uses d3.brushX, d3.axisBottom, d3.randomNormal, and d3.arc for the handle shapes, rendering to SVG.

Mmbostock

80% match

Loading thumbnail…

Scatter plot brushing

This example demonstrates interactive brushing on a scatter plot, where users can drag a rectangular selection to highlight points within that region in orange while dimming others remain blue. The visualization uses 300 randomly generated data points from a normal distribution, rendered as SVG circles with axes. The brushing interaction is implemented using d3.brush, with the brushed event updating circle fills based on the selection bounds, while brushended resets the colors with a smooth transition when the brush is cleared. The code uses d3.scaleLinear for positioning and d3.axisBottom/axisLeft for axes.

EEfratVil

80% match

Loading thumbnail…

Brushing Circles with D3-Brush

This example demonstrates interactive brushing on a scatterplot of six circles, where dragging a rectangular selection highlights overlapping data points. It shows how a brush can filter or emphasize specific marks in a visualization. The implementation uses D3’s `brush` module, with a `brush` event listener that checks each circle’s coordinates against the selection bounds to update a `highlightedSet` in the state. Circle styling (stroke, opacity) responds to the highlighted set, and the `end` event clears highlights when the brush is dismissed. The rendering uses SVG elements via D3’s `select` and `join` pattern.

CCurran Kelleher

79% match

Loading thumbnail…

Brush Snapping III

This example shows three clusters of 300 normally distributed points each, colored by cluster using `d3.schemeCategory10`, with visible x- and y-axes. A horizontal brush, created with `d3.brushX`, snaps its selection to integer coordinates on the x-axis. During a brush drag, the code maps the selection back to data space, rounds the values, and uses `d3.event.target.move` to reposition the brush, ensuring the selection always covers a complete unit interval.

Mmbostock

79% match

Loading thumbnail…

Brush Handles d3v4 II

This example demonstrates d3-brush with custom resize handles in D3 v4, highlighting the brush selection over a scatterplot of 800 random points. It shows how brushed points become highlighted with a red stroke, while custom path-based handles render on the left and right edges of the selection. The implementation uses d3.brushX, d3.scaleLinear, and d3.axisBottom, with the handle path defined via a custom function resembling the crossfilter approach. The brush’s start and brush events trigger the brushmoved function, which updates point activity and handle positioning based on the current selection.

PPhilippe Rivière

78% match