Project
Well done, you've finished the Axis module! You can now give meaning to every position on your charts with clean, reusable axis components.
Time to put it all together: build a polished bubble plot from scratch using the famous Gapminder dataset.
Congrats!
You now know how to build reusable axis components, handle margins and translations, add grid lines, titles, and style variations, and even work with D3's axis helpers.
That's everything you need to give a chart its frame. You now have all the knowledge to create professional static charts, with no customization limits!
It's now time to put it all together and build a polished bubble plot from scratch.
Your mission
Your project is to create a bubble plot based on the Gapminder dataset.
Gapminder is one of the most famous datasets: a collection of country-level statistics popularized by Hans Rosling's iconic TED talks on global development trends.
The chart shows the relationship between GDP per capita (x-axis) and life expectancy (y-axis). Each bubble represents a country, with color for the continent and size for the population.
Here's a minimal version as an example — but please make it your own and better!
Oh no! 😱
It seems like you haven't enrolled in the course yet!
Join many other students today and learn how to create bespoke, interactive graphs with d3.js and React!
Enrollment is currently closed. Join the waitlist to be notified when doors reopen:
Or Login