D3.js
Learning D3 — Books, Code Editor, and Other Resources to Help You Learn
Remember I mentioned in my other post about my two failed attempts learning D3 before? Guess what? I think I succeeded this time! Although I still have a LONG way to go building up experiences using D3 in projects, I feel like I finally get the gist of it (tree chart made with D3 below — tutorials here).
Like any post in my blog, I want to share my experience to help those who had the same struggle, to help you start learning D3 (if needed).
Do you need to learn D3?
“D3 was created to fill a pressing need for web-accessible, sophisticated at visualization.¹”
Before you start, you should know if it’s necessary for you to learn D3. It’s a tool that serves a need, do you actually have the need?
For most visualization needs, you don’t need to learn D3. There are so many other libraries and tools that are way easier to master and use, e.g. Excel, Powerpoint, Google Data Studio, Plotly, and Tableau, etc.
D3 was created so people can create rich visualizations with a high level of interactivity that can be accessed like web content with flexibility. Well..that’s a tongue twister. Basically, you should learn D3 if:
- you want to create web-accessible interactive visualizations, for example, visual essays.
- you want to have control over the whole visualization process vs. relying on another platform.
- you’ve encounter visualization needs that existing platforms cannot resolve with ease, for example, Tableau requires a lot of manipulation to build visualizations like tree charts and sankey charts — so I decided to resort to learning D3 vs. learning Tableau tricks that only work for that platform.
Otherwise, your precious time should be spent elsewhere — maybe read some books?
Books
Instead of Udemy courses, I found a book to follow along this time, and I cannot recommend it enough. It’s Elijah Meeks’s book — D3 in Action*.
*You should get the 2nd edition for updated code.
Unlike most Udemy courses that try to feed you everything D3 has to offer, which can be extremely overwhelming and set you up for failure, Meeks’s book focuses on the core of D3 for visualization needs. He goes right into how to build shapes, charts, layouts, and visualizations — so you don’t get stuck at the boring syntax.
Because D3 uses javascript syntax, if you’ve never learned the language before, I do recommend you quickly go through the documentation of Javascript before you dive into Meeks’ book.
Code Editor
You can use any editor you like. I love using Visual Studio Code, it’s free and comes with many handy plugins — one of which is Live Server (also mentioned in this post).
Live Server allows you to run scripts on your local server and see code changes live — a great time-saver especially when you are learning D3.
Other Resources to Bookmark
The best way to learn is from copying others' work. Steal like an artist!
- D3 gallery: http://christopheviau.com/d3list/gallery.html
- D3 gallery: https://www.d3-graph-gallery.com/index.html
- Visual essays using D3: https://pudding.cool/
- D3 Tutorial+Gallery: https://www.d3indepth.com/introduction/
- Creator of D3: https://observablehq.com/@mbostock
References:
[1]: Elijah Meeks. D3.js in Action, Second Edition
More of my essays:
- Learning D3 — Multiple Lines Chart w/ Line-by-Line Code Explanations
- Learning D3 — Running a Local Server
- How to read a chart
- Visualizing Uncertainty for Decision-Making — Why and How?
You can also support me through buy me a coffee.