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).

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