Experiment 6 – dragging orthographic projections

For our last example, we will add the ability to drag our globe so that the user can spin it to the left or right. Open http://localhost:8080/chapter-5/example-6.html from the code samples and let's get started:

var dragging = function(d) { 
  var c = projection.rotate(); 
  projection.rotate([c[0] + d3.event.dx/2, c[1], c[2]]); 
  map.selectAll('path').attr('d', path);
};

Our first piece of new code is our dragging event handler. This function will be executed every time the user drags the mouse on the screen. The algorithm executes the following steps:

1. Stores the current rotation value.
2. Updates the projection's rotation based on the distance it is dragged.
3. Updates all the paths on the map.

The second step deserves a little more explanation. Just like the d3.zoom() event handler, d3.drag()...