Learning D3.js 5 Mapping - Second Edition

Defining the planes

Next, we build the fundament for our animation. Essentially, we want an array of points on each plane's route. We will call them way points and here's how they will look for the flight path Frankfurt to Atlanta as an array and as points on the path:

Way points in an array (showing the first 10 of 733) and on the map (an illustration, not exact)

The way points are the core ingredient, the fuel for our animation. When we animate the first frame, we will:

1. Clear the plane's own canvas contextPlane.
2. Pull out the very first way point for each plane.
3. Draw that plane in this position.

When we draw the second frame we do the same, ...