Clients
IE University, Arcada University, NOVA and more
Description
This project was a teaching presentation designed to help learners understand the fundamentals of D3.js (Data-Driven Documents). It started by introducing what D3 is, why it matters, and how it differs from higher-level charting libraries. The core of the presentation focused on fundamental concepts: selections, data binding, scales, and axes. Each of these was explained not only from a coding perspective but also from a data visualisation design perspective, showing why they matter in crafting meaningful visuals. After establishing the basics, the presentation moved into practical applications by building simple charts such as bar charts and scatter plots. These examples showed how D3’s manual control of scales and bindings results in flexibility that can feel daunting at first, but also incredibly powerful once understood. Finally, the course moved toward D3’s biggest strength: interaction and animation. I showed how to add hover effects, clickable interactions, and smooth transitions, and explained when these elements improve communication rather than simply add decoration.
Impact
This presentation gave students not only the technical knowledge to begin building in D3 but also a way to think about interactivity and animation critically. It prepared them to move beyond “copying examples” toward designing their own purposeful visualisations.
Year
2020 updated 2023
Tools
HTML, CSS, JS, d3.js,
Challenge
The most difficult part of this project was deciding the scope. D3 is an enormous library, and distilling it into a coherent introduction required a lot of restraint. Another challenge was addressing the fact that learners often came from very different backgrounds: some with strong programming knowledge but little design sense, and others with the reverse. Finding the right balance between coding detail and design theory was critical. Finally, simplifying concepts like the enter-update-exit pattern without oversimplifying them was a teaching challenge I had to solve with carefully chosen examples.
Learning
By preparing this presentation, I became fully comfortable with explaining D3’s building blocks such as selections, joins, and scales. I learned how to teach these concepts step by step so that students could follow along even if they had little prior coding experience. The process also made me more deliberate in connecting code mechanics to design choices, ensuring that learners understood why they were making certain scale or binding decisions. Beyond teaching, I learned how to structure interactive and animated examples in a way that clarified the story rather than distracted from it.
Topics
Data binding, data joins, scales, axes, interactivity, animation, teaching, bar charts, scatter plots, small multiples
