block by emeeks 77642fa75ec6170ee24a

Ch. 7, Fig. 10 - D3.js in Action

Full Screen

This is the code for Chapter 7, Figure 10 from D3.js in Action showing d3.behavior.zoom() paired with d3.geo as well as examples of how to create manual zoom buttons.

Note that this demonstrates “projection zoom” which adjusts the scale, translate (and sometimes center or rotate) of the map’s projection and then redraws the map with the new projection settings. This is in contrast with “transform zoom” which takes the zoom behavior values and applies them (translate and/or scale) to the transform attribute of SVG elements.

index.html

cities.csv