Project
Time to put everything together. Build a responsive energy dashboard exploring how the world's energy mix has evolved over 60 years.
Use the wrapper pattern, the useDimensions hook, and a flexible layout to arrange ~4 chart widgets that work on desktop and mobile.
Congrats!
You now know how to make any chart responsive using the useDimensions hook, how to organize your code with the wrapper pattern, and how to avoid the most common pitfalls.
That means every chart you build from now on can adapt to any screen size. That's a game-changer for real-world projects.
Now it's time to prove it. Let's build a responsive energy dashboard with multiple charts that adapt to any screen size.
Your mission
Your project is to create a responsive dashboard exploring how the world's energy mix has evolved over the last 60 years.
The dataset comes from Our World in Data, one of the best open-data resources on the web. It tracks energy consumption by source (coal, oil, gas, nuclear, hydro, solar, wind...) for countries around the world, from 1965 to 2024.
Build a page with ~4 chart widgets arranged in a responsive layout. Here are some ideas:
- A stacked area chart showing the global energy mix over time
- A bar chart comparing energy consumption across countries
- A line chart tracking the rise of renewables
- A donut chart breaking down the energy mix for a single year
The key challenge is the layout: your dashboard should look great on a wide desktop screen and gracefully reflow on a phone. Each chart must use the wrapper pattern and the useDimensions hook.
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