Brush & Zoom II

100%

Brush & Zoom II

✓ Published0🌍 Public

Last edited Jul 7, 2016

Created on Jul 6, 2016

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.

AI-generated description

Using d3-brush to zoom to the brushed region. Double-click or double-tap to zoom out. Another approach is to use Focus + Context.

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

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

84% 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…

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

83% match

Loading thumbnail…

Click-to-Recenter Brush

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.

Mmbostock

82% match

Loading thumbnail…

Scatter plot with zoom

This scatter plot visualizes 300 normally distributed data points and supports interactive zooming through a brushed region. Users can drag to select a rectangular area, which triggers a smooth animated transition that rescales the x and y axes to focus on the selected points. Double-clicking outside the brushed area resets the view to the full dataset. The implementation uses D3 v4’s `d3.brush` for selection handling, `d3.scaleLinear` for coordinate mapping, and `transition.attr` to animate the circles’ positions. The axes are updated via `d3.axisBottom` and `d3.axisLeft`, with a clip path preventing points from spilling outside the plotting area.

EEfratVil

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

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

80% match