Skip to main content
SimilarExport ZIP
100%

Fork of Understanding the zoom on d3.js

✓ Published0🌍 Public
KKamilPodsiadlo
Last edited Jul 21, 2021
Created on Jul 21, 2021

A fork of Mike Bostock’s zoom example, this visualization displays monthly S&P 500 closing prices as a blue area chart. An initial animated transition zooms into the data range from 2003–2004, and users can continue panning and zooming interactively. The code uses d3.zoom with scaleExtent and translateExtent, d3.area with curveMonotoneX, and d3.axisBottom for the time axis, rendering everything as SVG.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Understanding the zoom on d3.js

This example demonstrates interactive zooming and panning on a time-series area chart of S&P 500 monthly closing prices. The visualization uses d3.zoom with scale and translate extents to constrain navigation, updating the area path and x-axis via the transform’s `rescaleX` method during the `zoom` event. Animated intro zoom transitions from January 2003 to January 2004. Data comes from a local CSV file, rendered as an SVG area with `d3.area` and `curveMonotoneX`.

11andrey3
84% match
Loading thumbnail…

Understanding the zoom on d3.js

This example demonstrates an interactive zoom on a time-series area chart of S&P 500 monthly closing prices from 2000 to 2010. Initially, the view animates from a transformed scale to a default extent over two years, using `d3.zoom()` and `d3.zoomIdentity` to rescale the time axis. The chart is rendered as an SVG, with a clipped area path and axes updated during the zoom transition. Data is loaded from `sp500.csv`, and the zoom is implemented with a 1.5-second transition.

Rrigt
84% match
Loading thumbnail…

Zoom to Domain

A line chart of S&P 500 monthly prices from 2000 to 2010 plays an introductory zoom animation, smoothly transitioning from the full dataset to a one-year window centered on 2003. The area chart uses an SVG path with a clip-path. Built with D3 v4, it applies `d3.zoom` and `d3.zoomIdentity` to programmatically rescale the time axis via `rescaleX`, updating the area and x-axis in the `zoom` event handler.

Mmbostock
78% match
Loading thumbnail…

Mike Bostock's zoom

This example displays a zoomable, gradient-filled rectangle with corresponding axis tick lines that rescale smoothly as the user pans and zooms. The visualization uses D3 v5’s `d3.zoom` behavior with `scaleExtent` and `translateExtent` limits, and applies the zoom transform to both a styled `<rect>` and axes via `d3.axisBottom` and `d3.axisRight`. A reset button triggers a 750-millisecond transition back to the identity transform. The SVG background uses a linear gradient with ten color stops, and the axis lines are drawn with reduced stroke opacity.

11andrey3
77% match
Loading thumbnail…

Fork of D3 Zoom

This example demonstrates interactive zooming and panning on an SVG canvas. A group of circles connected by lines, generated from trigonometric functions in `utils.js`, responds to mouse wheel and drag gestures through the `d3.zoom` API. The zoom behavior applies a scale transform to the container group, respecting a scale extent between 0.5x and 4x. The SVG output is created with the `select` and `append` methods from the `d3` v7 library.

KKhanin Sisaengsuwanchai
77% match
Loading thumbnail…

Fork of Zoomable Circles with D3-Zoom

This example shows a zoomable bubble chart of six colored circles of varying sizes and positions. It demonstrates how to add pan and zoom interactions to a visualization using the D3.js library. The code uses `d3.zoom` to handle user input and applies the zoom transform to a group element containing the circles. Data is hardcoded as an array of objects with x, y, radius, and fill color properties. The visualization updates its state with the current transform, allowing for smooth interactive exploration of the circular layout.

SStephen HC Lin
75% match
Loading thumbnail…

Fork of Zoomable Circles with D3-Zoom

This example shows a zoomable bubble chart of six colored circles of varying sizes and positions. It demonstrates how to add pan and zoom interactions to a visualization using the D3.js library. The code uses `d3.zoom` to handle user input and applies the zoom transform to a group element containing the circles. Data is hardcoded as an array of objects with x, y, radius, and fill color properties. The visualization updates its state with the current transform, allowing for smooth interactive exploration of the circular layout.

SStephen HC Lin
75% match
Loading thumbnail…

Zoom + Pan

This example demonstrates how to pan and zoom a chart using D3.js v3. It renders an SVG with axes and a filled background rectangle, using linear scales for the x- and y- dimensions. The `d3.behavior.zoom` API links the zoom behavior to the scales, allowing mouse wheel and drag interactions to rescale the axes. When zooming occurs, the axes are redrawn to reflect the updated scale ranges. The code sets a zoom scale extent between 1 and 32, and uses `d3.svg.axis` to produce the tick marks and grid lines.

Mmbostock
75% match