Our focus in this chapter will be on mapping with Canvas as well as on a benchmark of Canvas against SVG animation. In order to spend our time and effort wisely, I have pre-built an SVG map we can use as a benchmark, leaving us the rest of the chapter to focus on how to build the Canvas flight path app. The chapter is called Mapping with Canvas and D3 after all...

Nonetheless, let's have a quick look at the steps we would take to build this app with SVG. There are roughly eight logical steps to follow:

1. You set up the map with a container SVG, as well as the projection and the path generator for the map
2. You load the map data and draw the map
3. You listen to button events and load in the appropriate dataset depending on the button pressed
4. You draw the airports
5. You calculate each plane’s origin and destination position as well as compute a path from origin to destination
6. You sample points along each plane’s path and store them in an array (we’ll call them way points)
7. Using D3, you transition each plane along its path
8. Once each plane has reached its destination, you let the transition start again

Now that we have conjured up our SVG flight path visual, let's see how many planes we can set off without any problems.