Brush Handles

100%

✓ Published0🌍 Public

Last edited Aug 2, 2019

Created on Dec 20, 2012

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.

AI-generated description

This example demonstrates how to add visible and draggable handles to d3-brush, rather than that relying on the invisible boundary of the brush extent. The handle sizes here are exaggerated for demonstration purposes!

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Brush Handles

This example shows an 800-point scatterplot with a draggable, visible brush handle range selection. The brush is rendered as two semi-circular handles on either side of the selection extent, which the user can drag to resize the range. The code extends `d3.brushX` with custom `path` elements and uses `d3.arc` to define their shapes. When the brush moves, a `brushmoved` function updates the handle positions and highlights the selected circles by toggling an "active" class, which changes their fill opacity.

FFrissAnalytics

94% 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

91% match

Loading thumbnail…

Brush Handles d3v4 II

This example demonstrates a D3 v4 brush with custom resize handles on a scatterplot of 800 random points. The brush selects a horizontal range along the x-axis, highlighting points within the selection by adding an “active” class. Custom path-based handles replace the default brush edges, using a `brushResizePath` function to draw arrow-like grips. The code uses `d3.brushX`, `d3.axisBottom`, and `d3.scaleLinear`, with the brush’s `start`, `brush`, and `end` events driving the highlighting logic via `d3.event.selection`.

FFrissAnalytics

91% 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

83% match

Loading thumbnail…

Customization of bush handler

This example shows an interactive scatterplot of 800 random data points, where a brush control selects a range along the x-axis and highlights the corresponding circles in red. The brush’s resize handles are customized with triangular SVG paths, generated by a `triangleData` function that computes relative path coordinates for the `d` attribute, using D3 v3’s `d3.svg.brush`, `d3.scale.linear`, and `d3.svg.axis`. The static SVG rendering relies on a fixed viewport with margins and translucent styling for the brush extent and selected circles.

11Cr18Ni9

83% match

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

82% 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

81% match

Loading thumbnail…

Brush Transitions

A scatterplot of 5,000 random points displays a red brush selection over a central region. Dragging or creating a new selection highlights points within the brush extent, while releasing the mouse triggers a smooth animated transition of the brush back to its original 100-by-100 pixel default position. The example demonstrates D3 3.3's brush transitions, implemented with `d3.svg.brush`, a quadtree for efficient point lookup, and `transition.call` to reapply brush extents during animation.

Mmbostock

81% match