But do you know what it'll actually cost you — and the planet?
Question 1 of 3
What kind of driving do you do?
Question 2 of 3
What vehicle class fits your lifestyle?
Question 3 of 3
What matters more to you?
Each dot is one recorded trip, colored by fuel type. The black dots mark the most representative trip for each fuel type in your chosen vehicle class. Better choices sit toward the bottom-left corner.
Each fuel type gets its own lane. Dots are individual trips, colored by efficiency band. The chart starts on the trip length you chose, then reveals the remaining trip lengths as you scroll.
Your Scene 1 choice is traced in orange ★. See how it compares across every class on both dimensions simultaneously.
Based on your choices, here's how your selected class compares to better-performing alternatives — ranked by your stated priority.
Want to explore different choices? Restart the quiz ↑
We have built an interactive scatter plot visualizing the tradeoff between actual mileage (km per liter) and CO₂ emissions (g per km) across 600 recorded vehicle trips. Each data point is color-coded by fuel type — Diesel, Petrol, and Hybrid — making it easy to spot how different fuel technologies cluster in the efficiency-emissions space. A dropdown filter lets readers isolate specific vehicle classes to compare how each category performs. We also added zoom and pan so users can explore dense clusters, and a tooltip that surfaces the car name, fuel type, mileage, CO₂ value, and trip category on hover. We have now restructured the page around a five-scene scrollytelling narrative and added a quiz that feeds user choices directly into the downstream visualizations.
The most challenging aspect will be designing a narrative flow that guides readers through the data without overwhelming them, since we want the page to feel like a guided explanation rather than just a dashboard. Linking all five scenes so that quiz answers in Scene 1 automatically filter and highlight every downstream chart requires careful shared state management in D3. Another challenge is making our annotations genuinely informative — pointing out surprising findings like where hybrids underperform expectations rather than just labeling obvious clusters. With only 600 rows, every chart needs to carry its own weight. Finally, the Crossy Road transition between scenes 3 and 4 and responsive D3 layouts across screen sizes will require extra design attention.