Skip to main content
100%

Scatter plot with zoom

✓ Published0🌍 Public
EEfratVil
Last edited Nov 27, 2016
Created on Nov 11, 2016

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.

AI-generated description

Scatter plot zoom of the brushed region. Double-click to zoom out.

Similar vizzes

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

Brush & Zoom II

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.

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

D3 Zoom

This example demonstrates interactive zooming and panning on a scatterplot of 100 randomly positioned points. Users can scroll to zoom in and out within a scale extent of 0.5x to 4x, or click and drag to pan across the full-window SVG canvas. The visualization uses d3.zoom to attach zoom behavior to the root SVG element and applies the transform directly to that element’s `transform` attribute during the zoom event. Data is generated randomly with the `makeData` utility, and circles are bound and updated using D3’s data join pattern.

KKhanin Sisaengsuwanchai
84% match
Loading thumbnail…

Simple Zoom and Pan

This example demonstrates simple zoom and pan interactions on a scatterplot of 100 randomly positioned circles. The visualization uses D3 v4 to render SVG circles with a categorical color scale, while a transparent overlay rectangle captures pointer events and applies a zoom behavior with a scale extent from 0.5× to 4×. The zoomed function updates the transform attribute of a container group, enabling smooth panning and scaling of all circles. The code leverages d3.zoom and d3.event.transform to handle the interaction, with the data generated on the fly using d3.range and Math.random.

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 & 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…

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
81% match