Project
You now have the full performance toolkit: measure first, optimize React, and switch to canvas when the data demands it.
To close the course, let's build a force-directed graph of the world's flight routes: thousands of nodes and edges that would freeze in SVG, rendered smoothly in canvas with a hover tooltip.
Congrats!
You've reached the end of the performance module, and of the course! You now know how to spot what makes a chart slow, fix the cheap things first with useMemo and throttling, and, when that is not enough, drop SVG and render with canvas: drawing shapes, combining it with SVG axes, hit-testing for hover and tooltips, and animating it all in a render loop.
Time to combine everything into one demanding chart: a force-directed graph of the world's flight routes, rendered in canvas so it stays smooth.
Here's a small canvas network to set the mood. Yours will be far bigger, powered by real flight data:
Oh no! 😱
This lesson isn’t available just yet.
Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.
Thanks for your patience! 🙏