Brush & Zoom with viewBox

Reimplementation of the classic Focus + Context visualization, using SVG’s viewBox attribute for the zoom/pan instead of recalculating paths on every interaction.

Advantages

This approach uses SVG’s viewBox to achieve the following effects:

• The area chart is only ever rendered once, since the underlying dataset never changes throughout this vis.
• Modern browsers implement mostly complete implementations of the SVG standard, so they can all zoom/pan an SVG based on its viewBox values.
• Instead of recalculating the path on every zoom/pan change, we offload that to the browser.

Implementation

The aperture SVG acts as a window/lens on top of focus - we adjust its viewBox to control how close in or how far out we want to look to see which bits of focus below. The brush and zoom functions update the aperture’s viewBox as well as the focus x-axis.