Zoom and double Area

100%

Zoom and double Area

✓ Published0🌍 Public

Last edited Apr 20, 2017

Created on Apr 17, 2017

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.

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>

forked from <a href='http://bl.ocks.org/Saminu/'>Saminu</a>'s block: <a href='http://bl.ocks.org/Saminu/18d64db1a6fcc01d7c1917310f481cbd'>Zoom and double Area</a>

mit Licensed

Similar vizzes

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

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

Brush & Zoom

This example demonstrates a Focus + Context technique for time-series data, combining brushing and zooming to explore the S&P 500 index. The main chart displays the full time series as an area, while a smaller context chart below shows the same data. Users can brush a region in the context chart to zoom into that time range in the focus chart, or use the mouse wheel to pan and zoom directly on the focus view. The y-axis dynamically rescales to the visible data, and the brush handle in the context view updates accordingly. The implementation uses D3 v4 with SVG, featuring two area charts with synchronized scales, a brush for selection, and a zoom behavior for interactive navigation.

GGerardoFurtado

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

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

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

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

83% match

Loading thumbnail…

Brush & Zoom

This example implements a focus-plus-context visualization of monthly S&P 500 closing prices. The large focus chart displays the full time series as an area chart, while a smaller context chart below it includes a draggable brush for selecting a date range; zooming is performed via a transparent overlay rectangle supporting wheel and drag interactions. It uses the d3.brushX component for the selection and d3.zoom for the pan-and-scale transform, with both updating the focus area's x-axis domain. The data is loaded from a CSV file (sp500.csv), and all graphics are rendered as SVG paths.

深深度碎片

82% match