I've been vaugely interested for years, but I never quite had a good handle on what problems D3 solved; it's lower level than a charting library - to the extent that you use it to manipulate SVG primitives directly. At that point I figured you may as well go all the way and write it all yourself.

However now I've started playing around with it, I realise its killer core feature: it manages the relationships between the scale of your data and the coordinates on your screen, which saves a ton of awkward calculations. Add in helpers built on top for things like axes, line smoothing etc. and you've got a hell of a powerful API for creating charts, custom visualisations and anything else you can think of. I'm becoming a fan.

I really like the power of D3 but I have tried and failed at learning D3.js properly, I was unable to understand basic bars and graphs but the same reason you mentioned I find it difficult to advance, SVG manipulation with a big dataset is difficult after some point to create a complex visualizations.

Any good resources you could share that has helped you? Thank you.

Observable Plot (based on D3) might be a better place to start: https://observablehq.com/blog/introducing-observable-plot

I also have the d3 graph gallery. It shows only simple charts which ease the learning curve

d3-graph-gallery.com

Thank you.

Really nice gallery. I think this will serve as a great reference material for me when learning.

A bit late on the reply, but someone else mentioned observable HQ for lots of examples.

I found this YouTube video of someone walking through creating a bar chart helpful - the author explains as he goes:

https://youtu.be/BDpBAFvdjYo

Beyond that, copying and pasting working examples and trying to adjust them for your purposes works really well. I still don't fully understand the API but it doesn't seem to matter that much to start with - I'm still in the "monkey see, monkey do, monkey iterate" phase.

I have tried ObservableHQ but I am not sure it helps me understand D3 as much as it does help me use it like a Jupyter notebook.

And unlike Jupyter, ObservableHQ notebook does a lot of heavy lifting when it comes to creating charts for the web which outside that makes it really difficult to adapt to.

I guess I will have to follow the monkey rule until I really understand it well and need to learn desperately.

If 1 day you need to compute the position of all the rectangles in a treemap, you will understand how handy d3.js is.

D3.js is split in 2 types of functions:

- "math" - rendering

Math functions cannot be avoided for sure