Skip to main content
100%

Brush & Zoom II

✓ Published0🌍 Public
ZZoeLeBlanc
Last edited Jul 25, 2018
Created on Jul 25, 2018

This example demonstrates brushing and zooming on a scatterplot of 900 points distributed in three clusters. Users can drag a rectangle to zoom into a region, and double-click to reset the view. The visualization uses D3 v4 with `d3.brush` for selection and `d3.scaleLinear` for coordinate mapping, while axis tick marks are generated via `d3.axisTop` and `d3.axisRight`. Transitions animate the zoom effect using SVG circles and axis updates.

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6'>Brush & Zoom II</a>

gpl-3.0 Licensed

Similar vizzes

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
92% 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
87% match
Loading thumbnail…

Scatterplot basic

This example shows an interactive scatterplot of clustered data points, where users can brush a rectangular region to zoom into that area and double-click to zoom back out. As the view changes, the x and y axes smoothly transition to the new domain. Built with D3.js v4, it uses `d3.brush` for selection, `d3.scaleLinear` for axes, and SVG transitions to animate the rescaling of circles. The data comes from a CSV file containing x, y coordinates and cluster labels, with colors assigned via `d3.scaleOrdinal`.

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

Drag & Zoom II

This example demonstrates a zoomable and pannable scatterplot with draggable circles. It combines d3-drag and d3-zoom to let users pan the view by dragging on the background or move individual circles by dragging them. The SVG rendering automatically handles hit-testing and coordinate transformations. The code generates 2,000 synthetic data points from a cubic function and displays them with a linear x-scale and inverted y-scale.

SSpaceActuary
82% 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
81% match
Loading thumbnail…

Brushing

This example demonstrates interactive brushing on a small scatter plot of weight and height data from a CSV file. Users drag a rectangular brush region to highlight data points, turning selected circles red and unselected ones blue. The visualization uses D3 v6 with an SVG rendering, a linear scale for both axes, and d3.brush to manage the selection. Points are positioned using transitions and axes are rendered with d3.axisLeft and d3.axisBottom.

DDasbach.EJ
81% match
Loading thumbnail…

part 3, Zoom and Panning with D3.js and canvas

This example demonstrates interactive zooming, panning, and brushing of a synthetic scatterplot containing 10,000 random data points, rendered with a hybrid SVG–Canvas approach. The D3.js v4 code overlays an SVG layer for axes and controls on top of a Canvas layer for efficient point drawing, using `d3.zoom` and `d3.brush` to handle transformations and selections. A toolbar offers Reset, Zoom, and Brush modes, where zooming rescales axes via `d3.scaleLinear` and redraws points with `Canvas` arc primitives, while brushing highlights the selected region on the SVG layer.

FFrissAnalytics
80% match