Implementing zoom and pan behavior

Zooming and panning are common and useful techniques in data visualization, which work particularly well with SVG-based visualization, since vector graphic does not suffer from pixilation as its bitmap counterpart would. Zooming is especially useful when you are dealing with large dataset when it is impractical or impossible to visualize the entire dataset, thus a zoom and drill-down approach needs to be employed. In this recipe, we will explore D3's built-in support for both zooming and panning.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter10/zoom.html

How to do it...

In this recipe, we will implement geometric ...

Get Data Visualization with D3 4.x Cookbook - Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.