Project
Time to put it all together. Use what you've learned about D3 and React to build your first D3 chart, with a little help from AI.
Congrats!
You now know what D3.js is, why it's so powerful, and most importantly — how it fits with React: D3 for the math, React for the rendering.
That's a huge mental shift that most tutorials get wrong. You're already ahead of the curve.
Now it's time to prove it to yourself. Let's build your first D3 chart from scratch and put it on the internet.
Your mission
The dataset below shows the number of students from each country who enrolled in the first cohort of this course:
const data = [
{ country: "United States", students: 19 },
{ country: "France", students: 11 },
{ country: "Germany", students: 9 },
{ country: "India", students: 7 },
{ country: "United Kingdom", students: 6 },
{ country: "Canada", students: 5 },
{ country: "Australia", students: 4 },
{ country: "Brazil", students: 3 },
{ country: "Spain", students: 3 },
{ country: "Netherlands", students: 2 },
];Your goal is to build a horizontal barplot that visualizes this data. One bar per country, with the bar width proportional to the number of students.
This is your first D3 chart! Don't try to make it perfect. A basic barplot with rectangles and country labels is already a big win. You can always improve it later.
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! 🙏