Experiment 3 – panning and zooming

A very common request when working with maps is to provide the ability to pan and zoom around the visualization. This is especially useful when a large map contains abundant detail. Luckily, D3 provides an event listener to help with this feature. In this experiment, we will outline the principles to provide basic panning and zooming for your map. This experiment requires us to start with example-1.html; however, feel free to look at http://localhost:8080/chapter-5/example-3.html for reference.

First, we will add a simple CSS class in our <style> section; this class will act as a rectangle over the entire map. This will be our zoomable area:

.overlay {
fill: none;
pointer-events: all;
}

Next, we need to define a function to handle the event when the zoom listener is fired. The following function can be placed right below the map declaration:

var zoomed = function () {
  map.attr("transform", "translate("+ d3.event.translate + ")scale(" + d3.event.scale...