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.
AI-generated descriptionCombining d3-brush and d3-zoom to implement Focus + Context. Another approach is to zoom to the brushed region.