Learning D3.js 5 Mapping - Second Edition

Reasons to choose Canvas

While SVG might be easier to handle, Canvas has advantages when it comes to showing and animating more elements:

• SVG allows you to draw roughly 10,000 elements and animate 1,000 or so elements. With Canvas you can animate around 10,000 points. Why? First of all, Canvas is lower level and has fewer abstraction layers to keep and manage in memory. Secondly, browsers (like most monitors) mostly support a frame rate of 60 frames per second, meaning the screen is updated 60 times per second. This leaves 1000 / 60 = 16.67 milliseconds to finish all necessary rendering and housekeeping activities. As human brains are fooled into perceiving fluid animation at a mere 16 frames per second, the maximum time for rendering a ...