Learning D3.js 5 Mapping - Second Edition

Drawing with Canvas and D3

So far you have used D3 to render your visualizations with mostly SVG, and sometimes HTML, elements. In this section, you will learn how to use HTML5 Canvas to draw and animate your visualizations. Canvas can be used as an alternative to SVG, especially if you want to render more elements on screen. You will get an overview of what Canvas is and how it compares with SVG. You will learn how to draw and animate with Canvas and how you can use D3 with it.

After covering the foundations, we will visualize flight paths first with SVG and then with Canvas to contrast and compare the two rendering approaches hands on. First and foremost, this will give you a practical understanding of how Canvas works as an alternative ...