Boost your d3.js learning kickoff
Posted on March 7, 2017 in
2 min read
I've been involved in teaching d3.js and data visualisation in several classes since more than five years.
Every time it's like the first time.
It's always a challenge because every class is diverse and every student is unique. It's an ever learning process that is rewarding for this reason.
Since the coming of the 6th edition of Bigdive, I've started to think about how to improve the learning experience of the dataviz track I'm going to provide in class. It's something I try to do every year.
I've already penned some words related to some updates that are in the pipeline.
This time I'm going to focus on something more fundamental.
In any disciplines the hardest part is the beginning, the kick-off, the phase related to understand the basics.
Out of my teaching experience, I've started to see patterns related to the difficulties the students usually face with.
It's like there was a missing step between the zero knowledge and the first line of code.
Indeed, it's the lack of the DOM understanding.
D3.js is a layer on top of the DOM technology. You cannot really understand the library without a good understanding of its foundations.
The DOM looks like a toy for experienced programmers and maybe this is the reason why it's common to find d3.js tutorials that take the DOM for granted. It shouldn't be like that.
What I've seen in my experience is that the more the students have an understanding of HTML/SVG and CSS selection the faster is the route to be proficient with d3.js.
This is why I do usually teach the basics of DOM during the first lesson.
Having said that, the best advice I can give to people wishing to learn d3.js is pretty straight:
Learn the DOM first.
That means, start learning the foundation of the web platform and its technologies such as:
- How the HTML works
- How the SVG tag works, the primitive elements, the coordinate system, the scene graph
- How CSS selection works
Even with a brief understanding of the above topics, approaching the basic of D3.js become way easier by an order of magnitude.
Happy learning!