-
Book Overview & Buying
-
Table Of Contents
Learn D3.js - Second Edition
By :
This section covers two animation techniques based on rotation: continuous rotation, such as the Earth spinning on its axis, and motion across the surface of a sphere. The first can be implemented by updating projection.rotate() in a loop. The second is more complex, since it requires describing a path through composite rotations, but it can be done with d3.geoRotation().
You can animate the Earth spinning on its axis by incrementing the yaw angle and updating the geoPath. Start by defining a projection, the geoPath, and an array to store the current rotation.
const projection = d3.geoMercator(); const geoPath = d3.geoPath().projection(projection); const rotation = [0, 0, 0];
After rendering the map, start the animation, increment the yaw angle, apply the new rotation to the projection and update the paths that render the map:
const paths = svg.selectAll("path"); // select all features and graticules
const initialYaw...