There are many tools to build charts out there. I like to think of their organization like this:
As you can see, D3.js sits on the far right: it’s the most powerful tool—but also the hardest to learn!
Since you’re reading this, you’re probably interested in data visualization. So I believe it’s worth understanding at least a little bit about what D3.js actually is!
D3.js is a JavaScript library. It's open source and its code lives on GitHub with 111k stars! 😳
JavaScript is the programming language of the web. At its core, a website is just an HTML file: a text file ending in ".html" that contains elements. For example, you could write:
And boom! You’ve got your first website, with a simple paragraph on it.
Then JavaScript makes that website come alive.
Browsers know how to “speak” JavaScript. For example, you could add a little script that says: when the user clicks on “Hello world,” turn it blue!
D3.js is simply a collectionof JavaScript functions that help you do things like this when you create charts.
D3.js ≠ a dataviz library
Indeed! It doesn’t have a boxplot() or scatterplot() function that spits out a finished chart for you.
Instead, it gives you helper functions that make it easier to build things yourself. The key idea: you draw everything manually.
For example, to make a scatterplot you would:
Loop through your data points, calculate their X and Y positions, and draw circles on the screen.
Draw the X axis: a line, plus ticks and tick labels. Then do the same for the Y axis.
Add a title somewhere with a
element.
Want a tooltip? That’s more code to write.
D3.js won’t build the chart for you, but it provides powerful utilities:
scale() helps compute circle positions.
ticks() finds the tick positions for your axes.
And so on.
If you're interested, I made an interactive sandbox with the most simple scatterplot you can do with d3.js!
D3.js = powerful, but hard
Because you build everything manually—including interactivity—you can create literally anything.
No more: “If only this library had that option…”
The downside? It takes a long time to learn. Writing everything yourself is powerful, but also demanding.
Even now, whenever I go back to other tools, I quickly feel frustrated because they feel so limited compared to D3.
The web is split
Here’s an important (but confusing) point.
For years, people used plain JavaScript to build websites (we call this Vanilla JavaScript). It worked just fine.
But around 15 years ago, Facebook released a UI library called React, and it changed everything. It solved so many developer headaches that it became the standard.
Why does this matter for D3?
Because when you use React (or Vue, or Svelte), about two-thirds of D3 becomes unnecessary.
This has a huge impact on how you should learn D3. If you follow outdated tutorials, you’ll spend time learning parts of D3 that you’ll never need in modern web development.
But that’s a topic for next week’s issue. 😉
Best, Yan PS: if you want to learn d3.js, check my d3 graph gallery and my react graph gallery! It's entirely free and open source! PPS: Any question about d3? Please let me know, I'm keen to write more on this
