Zoom to Domain

100%

Zoom to Domain

✓ Published0🌍 Public

Last edited Apr 20, 2017

Created on Mar 10, 2017

This example shows a time-series area chart of S&P 500 monthly closing prices from 2000 to 2010, rendered as a smooth monotone curve in SVG. Upon loading, the chart automatically animates a programmatic zoom into the year 2003 using d3.zoom and d3.zoomIdentity, scaling the x-axis to highlight that specific domain. After the intro transition, users can pan and zoom manually, with the area path and x-axis updating in real time via the zoom event’s rescaleX method. The data comes from a CSV file, and the visualization uses D3 v4’s d3.area, d3.axisBottom, and d3.timeParse APIs.

AI-generated description

This example demonstrates how to zoom programmatically to a domain of interest.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/431a331294d2b5ddd33f947cf4c81319'>Zoom to Domain</a>

gpl-3.0 Licensed

Similar vizzes

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

93% match

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

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

87% match

Loading thumbnail…

Zoom and double Area

A zoomable area chart displays monthly S&P 500 index prices from 2000 to 2010. The main chart uses a cardinal curve area, while a smaller context view shows the full series with a monotone curve. Users can brush the context chart or drag the main chart to zoom, with both interactions synced via `d3.brushX` and `d3.zoom`. The code uses `d3.scaleTime`, `d3.area`, and SVG rendering, with data loaded from a CSV file.

SSaminu

85% match

Loading thumbnail…

Zoom and double Area

This visualization displays the S&P 500 Index as a time series, with a large focus area chart for detailed viewing and a smaller context chart for overview and brushing. The main chart supports zooming and panning via mouse interaction, while the context chart’s brush synchronizes with the focus. Built with D3 v4, it uses `d3.scaleTime`, `d3.area`, `d3.brushX`, and `d3.zoom` to manage the dual-area layout, with smooth curves via `d3.curveCardinal` and `d3.curveMonotoneX`. Data is loaded from a local CSV file with monthly price values.

TThanaporn-sk

85% match

Loading thumbnail…

Fork of Understanding the zoom on d3.js

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.

KKamilPodsiadlo

79% match

Loading thumbnail…

Brush & Zoom

This example shows a focus and context view of the Standard & Poor’s 500 stock index over time, with a large area chart on the top and a smaller overview below. A colored brush in the context pane selects a date range, while a transparent rectangular overlay on the focus pane enables direct zooming and panning via the `d3.zoom` API; both interactions synchronize the visible data domain. The code combines `d3.brushX` with `d3.zoom`, and uses `d3.scaleTime`, `d3.axisBottom`, and `d3.area` to render the monthly price data from the CSV file as scalable vector graphics (SVG).

Mmbostock

79% match

Loading thumbnail…

Brush & Zoom

This example demonstrates a Focus + Context interaction for exploring monthly S&P 500 index prices. The main chart displays the full time series as a smooth area, while a smaller context chart below shows the entire dataset with a draggable brush. Using d3-brush and d3-zoom together, the brush selection drives the zoom transform on the focus chart, and zooming on the focus chart updates the brush position. The SVG is rendered with d3.v4, and the data comes from a local CSV file.

TThanaporn-sk

77% match