Clients
Personal
Description
This project was created to address the learning gap in D3.js. While simple tutorials exist, the leap to the stunning real-world projects online is steep. To help bridge this, I built a 30-day challenge in Observable notebooks, where each day introduced new concepts, visualisations, or challenges. The series started with fundamentals like scales, selections, and data binding, but quickly moved into real visualisation challenges. One example was building a scatterplot with Spotify data containing nearly 30,000 points. I tackled overplotting using small circle sizes and opacity, then added animation to reveal points sequentially, and finally built rich tooltips for interactivity. Other notebooks explored advanced visualisations like hexbin plots and animated line graphs.
Impact
The notebook series became a practical learning tool for others interested in D3, offering a structured way to go from basics to advanced. It also strengthened my own mastery of D3 and my ability to explain it clearly.
Year
2021
Tools
HTML, CSS, JS, d3.js, Observable, arquero.js
Challenge
The hardest part was balancing depth vs. breadth: explaining enough for learners to follow while still producing a wide collection of visualisations. Another challenge was creating designs that were not only functional but elegant, with tooltips, animations, and interactions carefully crafted.
Learning
I learned how to structure a teaching progression in D3, balancing clarity of explanation with a wide variety of chart types. I deepened my knowledge of dynamic vs. static visualisation, tooltips, animation, and interactivity. I also discovered how powerful Observable notebooks are for combining explanation, code, and visuals in one place.
Topics
Notebooks, overplotting, tooltips, hexbin, multi-line charts, d3 transitions
