Learning D3.js 5 Mapping - Second Edition

Measuring the performance

So here it is – let's make some planes fly. We should start modestly and try with 100 routes:

SVG visualization of 100 flight paths at 60 FPS

See the frame rate in the top-left corner? It's a bit small but we're still very happy with it! Displaying 60 frames per second is perfect. 1,000 flights will give us up to 40 frames per seconds. This is a drop, but the animation remains smooth. However, even at 1,000 flights we can’t really see any major clusters of flight activity. So, let’s try 5,000 flights at the same time:

SVG visualization of 5,000 flight paths at 6 FPS

Our performance crashed to 6 FPS. While this static ...