Skip to main content
100%

Brush & Zoom

✓ Published0🌍 Public
GGerardoFurtado
Last edited Jul 4, 2018
Created on Jul 4, 2018

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.

AI-generated description

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>

gpl-3.0 Licensed

Similar vizzes