After Scott Murray’s classic introductory book, I’ve been continuing my D3 journey by taking up Amelia Wattenberger’s Fullstack D3 and Data Visualization course. Below are my consolidation exercises/visualizations, just like I did for Murray’s book! Please note that the nuances of dataviz design weren’t my priority here, rather just being able to create the charts and complete the exercises
Lesson 1: Line Chart
Note: these charts aren’t responsive, so you need to have the window/browser in full screen
I reproduced the daily temperature chart based on MeteoSwiss’ data about the daily average temperature in Geneva, during 2023.
I also made a line chart about witch trials in Europe, based on Peter Leeson and Jacob Russ’ research.
Lesson 2: Scatterplot
For the scatterplot, I simply used “Goal and Shot Creation” data for players in the “Big 5” (football/soccer) European Leagues. Data is from FBref, and for the ongoing 2024/25 season.
The color gradient is for total goal-creating actions, as opposed to per-90 values.
Lesson 3: Bar Chart
Note: this isn’t responsive, so you need to have the window/browser in full screen
Here the (simultaneous/one-time) plotting of multiple bar charts is based on randomly-generated data for six metrics!
Lesson 4: Animations and Transitions
Here I made two basic charts with randomly-generated data, and animated transitions
Lesson 5: Interactions
Click on this text to update the chart with new values
Click on one bar to sort the chart!
Click on this text to update the chart with new values
Other Lessons/Modules
There is more stuff in Wattenberger’s course and book, e.g. about making maps, dashboards, and more complex visualizations.
But I’ve gone through these parts by myself, without creating something I’d want to show here.
I plan to share some more complex/ambitious D3-based visualizations in the future though!
Alexandre Bovey