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]])

world.attr('d', path);
mexico.attr('d', path)
        .style('fill', 'lightyellow').style('stroke', 'orange');
};

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. Store the current rotation value.

2. Update the projection's rotation based on the amount dragged.

3. Update all the paths in the world map.

4. Update all the paths in the map of Mexico.

The second step deserves a little more explanation. Just like the d3.behavior.zoom event handler, d3.behavior.drag exposes information about the performed action...