100%

Brush & Zoom

✓ Published0🌍 Public

Last edited Aug 29, 2018

Created on Aug 29, 2018

This example combines d3-brush and d3-zoom to create a focus + context visualization of S&P 500 monthly closing prices from 2000 to 2013. The main chart displays the full time series as a filled area plot with axes, while a smaller context chart below includes a brush that lets users select a time range. Brushing the context or zooming (via mouse wheel or drag) on the focus area updates the other interactively, with the x-scale of the focus view rescaling accordingly. The zoom behavior is constrained to the horizontal axis, and the two interactions are synchronized so that neither overrides the other. The visualization uses an SVG renderer with D3 v4.

AI-generated description

Brush & Zoom

Combining d3-brush and d3-zoom to implement Focus + Context. Another approach is to zoom to the brushed region.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172'>Brush & Zoom</a>

forked from <a href='http://bl.ocks.org/AlainRo/'>AlainRo</a>'s block: <a href='http://bl.ocks.org/AlainRo/542b063a12524a2f17d1005c1d4beb6e'>Brush & Zoom</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Brush & Zoom

This example combines d3-brush and d3-zoom to implement a Focus + Context view of the S&P 500 monthly closing prices from 2000 to 2013. The main chart displays the full time series as an area chart, while a smaller context chart below shows the same data at a smaller scale. Users can brush over the context chart to select a time range, which updates the focus chart’s domain, or zoom directly on the focus chart with the mouse wheel or drag gestures. The two views stay synchronized: brushing updates the zoom transform, and zooming updates the brush selection. The visualization uses SVG rendering with a steelblue area and axes, demonstrating how to combine brushing and zooming for interactive data exploration.

Aackuser

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

96% 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.

深深度碎片

94% match

Loading thumbnail…

Brush & Zoom

This example combines d3-brush and d3-zoom to implement a Focus + Context visualization of the S&P 500 index. The main chart displays the full time series as a blue area, while a smaller context chart below shows the same data with a brushable selection window. Users can either drag the brush handle in the context view to select a date range, or pan/zoom directly on the focus view. The two views are synchronized bidirectionally, so brushing the context updates the focus, and zooming in the focus updates the brush selection. The code enforces a minimum brush size to prevent over-zooming, and uses d3.zoom's transform to rescale the x-scale during pan/zoom interactions.

GGerardoFurtado

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

94% match

Loading thumbnail…

Brush & Zoom

This example combines d3-brush and d3-zoom to create a Focus + Context interface for exploring time-series data. The main chart (focus) displays the S&P 500 index as a smooth area chart, while a smaller context chart below shows the same data. Users can brush a region in the context chart to zoom the focus view, or scroll/wheel over the focus chart to pan and zoom directly. The two views stay synchronized: brushing the context updates the focus, and zooming in the focus moves the brush. The visualization uses SVG rendering with D3 v4, with axes for time and price, and a clip path to constrain the area mark.

AAlainRo

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

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

91% match