Skip to main content
100%

Brush & Zoom

✓ Published0🌍 Public
Aackuser
Last edited Feb 19, 2020
Created on Mar 17, 2023

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.

AI-generated description

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

gpl-3.0 Licensed

Similar vizzes