Flight Paths in SVG or Canvas

This small project is the result of chapter 9 of Learning D3js Mapping, a book I co-authored with Oscar Villarreal and Thomas Newton.

The chapter is a comparison of SVG and Canvas. While there are many reasons to opt for SVG (DOM paradigm, easy interaction, crisp visual at every zoom level) there is one big reason to go Canvas: performance.

As Canvas does away with the DOM and its memory overhead it can save us precious Frames per Second (FPS); the currency you often pay with in world front-end. The apps we build set out to show just that. We build two apps with comparable logic — one in SVG and one in Canvas. Both are tasked with visualising the flight paths of tomato coloured dots — obviously representing airplanes.

As we increase the number of planes, it becomes clear at 1,000 tomatoes airplanes that Canvas is going to win this one hands down. SVG drops to 6 FPS with 5,000 animated airplanes, compared to 45 Canvas FPS. Cranked up to 30,000 planes, Canvas still manages to cling on with 12 FPS. Not recommended for production but if you want to go there or further, there's still Mount webGL to climb...

The code is online right here and the book lives here. Please drop me a note with questions or comments.