Brush Transitions

100%

Brush Transitions

✓ Published0🌍 Public

Last edited Oct 11, 2018

Created on Oct 11, 2018

This example demonstrates brush transitions, a feature introduced in D3 3.3, where a rectangular brush automatically animates back to its default position after the user finishes dragging or selecting a new region. The visualization shows 5,000 random points with a brush overlay; as the brush moves, points within the current extent are highlighted red using a quadtree-based search. The code uses `d3.svg.brush`, `d3.geom.quadtree`, and `d3.scale.identity`, with SVG circles for rendering. Applying the brush to a `transition` (rather than a selection) smoothly returns the brush to its original extent, and interacting with the brush interrupts any ongoing transition.

AI-generated description

This example demonstrates brush transitions, a new feature in D3 3.3.

Try dragging the brush or selecting a new region. When you mouseup, the brush transitions smoothly back to its original position. The transition is initiated simply by applying the brush to a transition (rather than a selection), similar to automatic axis transitions. Note that interacting with the brush interrupts the current transition!

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/6216724'>Brush Transitions</a>

forked from <a href='http://bl.ocks.org/FrissAnalytics/'>FrissAnalytics</a>'s block: <a href='http://bl.ocks.org/FrissAnalytics/1dcfa5c6d6bf2d83469def7d86be017f'>Brush Transitions</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Brush Transitions

Five thousand random points are drawn in an SVG scatterplot. A draggable brush region highlights points inside it in red, and after the mouse is released, the brush smoothly animates back to its original position from the default extent. The example uses D3’s `d3.svg.brush`, `d3.geom.quadtree` for efficient point selection, and a transition on the brush call to animate the extent, interrupting any ongoing transition if the user interacts again.

FFrissAnalytics

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

93% match

Loading thumbnail…

d3-brush example

A minimal interactive brush demonstration renders a 400 by 400 SVG rectangle, where the user drags to select a rectangular region. The example uses the d3-brush API from D3 version 4 to track selection coordinates, logging the starting and ending positions to the browser console during brushing and reporting the absence of a selection when the brush is cleared. The code defines the brush extent to match the full drawing area and attaches start, brush, and end event handlers.

FFrissAnalytics

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

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

78% match

Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

11Cr18Ni9

78% match

Loading thumbnail…

Brush Snapping

A time-series brush snaps to day boundaries upon release. The example shows a timeline from August 2013 with a grid of 12-hour ticks; selecting a range triggers an `end` event, and the brush smoothly transitions to a rounded day-aligned selection using `brush.move` with a D3 transition. If rounding yields an empty interval, the code uses `timeDay.floor` and `timeDay.offset` to ensure a valid one-day range. The visualization uses d3.v4, an SVG axis with custom tick formatting, and an animated brushing interaction over a date scale.

Mmbostock

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

77% match