I love this post. I can't tell you how many times I've started trying to use d3 and gave up after a couple hours because "all I wanted was a bar graph" (at least 3). Learning it is still on my bucket list because it is truly an amazing library.
These days I’d recommend sticking to a framework you already know (like React or Svelte) for DOM manipulation and using D3 as a library on top of that. It eliminates a lot of the learning curve that was associated with D3’s elegant but esoteric approach to DOM manipulation. D3 is still an excellent way to do scales, force-directed graphs, grids and ticks, etc. and it’s modular enough that it works well whether it owns the DOM nodes or not.
Last time I looked into this, React and D3 didn't really work together, since D3 manipulates the DOM and React has its own Shadow DOM. Has this changed?
D3 still manipulates the DOM if you ask it to, but only a few of its subpackages actually manipulate the DOM directly (mostly the selection, axes, dragging, and zooming APIs IIRC). Everything else either transforms data structures within JavaScript, or generates SVG path strings which you can pass down into path elements through JSX.
The one place I’ve found it doesn’t quite play nice with React is not the DOM at all, but that the force simulation insists on modifying data in place where React wants things to be immutable, but it’s not a dealbreaker.
This is an excellent advice. And as you do more advanced graphing you learn more about SVG, which opens even more doors for even more advanced or customized graphing.
With SVG as your canvas and a good framework for DOM manipulation (in my case it is mostly vue), and the shapes and scales available from D3, it really starts to feel like you have as much freedom as you would with a pen and paper.
Check out Amelia Wattenberger’s work. She’s done a lot of writing and has created a course and written a book. I can’t speak directly to the book but I think her work in general is a good representation of the modern way that D3 is used in conjunction with other front-end frameworks.
Second this, reading her work is how I was able to build some really cool things using those ideas. Once you get it, it really unlocks the potential to create some unique things
This is so hard to mesh existing examples into your framework of choice though. That could do well with a lot more examples around to spot the line between framework, DOM and D3
My go-to for that has been Vega these days. Just love the conceptual model and I've actually been able to hold the key parta in my head, compared to most such tools.
For standard graphs, there are plenty of simple libraries built on top of d3 or just pure javascript. Use those. D3 is for when you want to create something custom or complex.
