Zoom and double Area

100%

Zoom and double Area

✓ Published0🌍 Public

Last edited Apr 7, 2017

Created on Apr 7, 2017

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.

AI-generated description

forked from <a href='http://bl.ocks.org/sarubenfeld/'>sarubenfeld</a>'s block: <a href='http://bl.ocks.org/sarubenfeld/77a425331ee1f6ddbd83aa8fdf1a563f'>S&P 500 Index (my take on a mbostock example)</a>

mit Licensed

Similar vizzes

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

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

86% match

Loading thumbnail…

Zoom to Domain

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.

TThanaporn-sk

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

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

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

82% match

Loading thumbnail…

Brush & Zoom

This example demonstrates a Focus + Context visualization of S&P 500 monthly prices, combining brushing and zooming. The main chart displays the full time series, while a smaller context chart below shows the entire dataset with a brushable selection window. Users can either drag a brush on the context chart to define a focused region, or scroll/pinch on the main chart to zoom. The two interactions are synchronized via d3-brush and d3-zoom, with the y-scale automatically rescaling to the visible date range. The area chart uses a monotone-x curve, with the focus area clipped and styled in steel blue.

GGerardoFurtado

81% match

Loading thumbnail…

Gist 21cc0f29827dacf30a658ef7763c19e7

An interactive area chart displays monthly S&P 500 price data. The visualization uses a focus-and-context technique, combining a large main chart with a smaller overview panel. Users can brush a region in the context panel to zoom the focus area, or directly pan and zoom the focus chart itself. The example uses d3.brush and d3.zoom, with d3.area for the line, and d3.axisBottom and d3.axisLeft for the axes, rendering as SVG.

深深度碎片

80% match