This example illustrates a simple trackball approach for rotating an orthographic globe ‘ with D3 3.0.
The idea is to express a click on the sphere in spherical coordinates with one rotation axis horizontal on the page, and one axis vertical. Then when we move the mouse, we just rotate the underlying sphere so that the point of initial click stays underneath the mouse. When the globe is oriented in its original location (i.e. rotation(0,0), with the north pole at the top of the page and the equator aligned with the horizontal canvas axis, it’s easy, since D3’s longitude rotation equals trackball rotation around the vertical axis, and the subsequently applied latitude rotation corresponds to trackball rotation around the horizontal axis.
But when the sphere is already rotated, it’s not easy to infer what the combined rotation should be. Ideally we want a way of composing two rotations, but I’m not aware that you can do that currently in D3?
So I did some math (actually sagemath.org did most of it for me) to work out the product of the original rotation matrix plus the new trackball motion, and derived an equivalent single rotation would be. This gives a more intuitive feel regardless of the position of the globe.
Compare with the original example I started from at http://mbostock.github.io/d3/talk/20111018/azimuthal.html and see what happens when you first rotate the globe so the north pole is approximately facing you. Subsequent trackball movements then become completely non-intuitive.
(You can reproduce the same behavior in the original source here by uncommenting one of the three behaviors in the mousemove() routine.)