Skip to main content
SimilarExport ZIP
100%

Canvas Semantic Zooming

✓ Published0🌍 Public
Mmbostock
Last edited Aug 30, 2017
Created on Sep 8, 2012

This example demonstrates semantic zooming of a scatterplot containing 2,000 points rendered on a Canvas element. As the user zooms, the points are re-projected through the current transform, and the drawing is cleared and redrawn at each zoom event. The code uses D3’s `d3.zoom` and `d3.event` to manage the interactive transform, and the `d3.randomNormal` distribution positions the data in a Gaussian cluster centered on the canvas. All drawing occurs directly on the Canvas 2D context.

AI-generated description

A series of related examples:

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Canvas Geometric Zooming

This example demonstrates geometric zooming on a canvas, where a scatterplot of 2,000 normally distributed points scales and translates as a unified image. The code uses d3.zoom with scaleExtent to handle user interaction, applying the transform directly to the canvas context via translate and scale methods. Points are drawn using the Canvas 2D API’s arc and fill operations, while the underlying data is generated with d3.randomNormal. Unlike semantic zooming, this approach redraws the entire visualization at the new scale, preserving the spatial relationships between all marks.

Mmbostock
93% match
Loading thumbnail…

Canvas Geometric Zooming

This example demonstrates geometric zooming on a canvas, where a scatterplot of 2,000 normally distributed points scales and translates as a single unit. The code uses D3 v4’s `d3.zoom` to handle user input, applying the transform directly to the canvas context via `translate` and `scale`. Points are drawn with the Canvas 2D API’s `arc` method, and the zoom behavior redraws all points on each event. No semantic distortion occurs—the entire visualization scales uniformly.

FFrissAnalytics
91% match
Loading thumbnail…

Canvas Chart Zoom

This example renders 10,000 random data points as a scatter plot on a Canvas surface, using d3fc’s `cartesianCanvasChart` and `seriesCanvasPoint` components. A d3-zoom handler enables pan and zoom interactions, re-rendering the chart on each transform by updating linear scales and invoking the chart’s render function. The code also includes SVG equivalents (`cartesianSvgChart`, `seriesSvgPoint`) to highlight the performance difference, with Canvas offering roughly 10x faster redraws.

CColinEberhardt
85% match
Loading thumbnail…

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

This example demonstrates zooming and panning across a scatterplot of 10,000 randomly generated points, with axes updating in real time. It uses a Canvas overlay for point rendering and an SVG layer for the axes, both driven by D3 v4’s `d3.zoom` and `d3.zoomIdentity`. A reset button triggers a smooth transition back to the default view. The `rescaleX` and `rescaleY` methods adjust linear scales on each zoom event, while `context.clearRect` and `arc` handle the drawing.

FFrissAnalytics
83% match
Loading thumbnail…

Pan & Zoom II

This example demonstrates a pan-and-zoom interface for a dataset of 2,000 points arranged in a phyllotaxis pattern, drawn on a Canvas. On zoom, the circles retain a constant pixel radius rather than scaling with the data. The implementation uses `d3.zoom` to handle user interaction and applies the transform via `transform.apply` to each point in `drawPoints`, while `d3.event.transform` supplies the current transformation during the zoom event. The `context.arc` method renders each point individually.

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

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

This example shows a canvas-based scatter plot of 10,000 random data points, with the page built for future brushing interactions. It uses D3.js v4 to create SVG axes and labels, while rendering the points themselves on a separate HTML5 canvas element for performance. The code initializes linear scales for both x and y dimensions, draws the axes with `d3.axisBottom` and `d3.axisLeft`, and plots each point using the Canvas API’s `arc` and `fill` methods. The canvas is positioned over the SVG using CSS classes, demonstrating a hybrid rendering approach.

FFrissAnalytics
81% match
Loading thumbnail…

SVG Geometric Zooming

A scatterplot of 2,000 normally distributed points demonstrates geometric zooming in SVG. The visualization shows how the entire coordinate system scales uniformly, with all circle radii increasing proportionally as the view magnifies. Built with D3 v4, the example uses `d3.zoom` attached to a background rectangle, applying the current transform directly to a group element containing all points. The code generates random positions via `d3.randomNormal` and renders each point as a circle with a `translate` transform, allowing the zoom handler to scale and pan the whole scene without recalculating individual positions.

Mmbostock
81% match