12 ms·
The first few days I used d3, I really struggled. And I got very frustrated. I simply couldn’t understand why the library was so popular. But I powered through
by atonse 6y ago
The first few days I used d3, I really struggled. And I got very frustrated. I simply couldn’t understand why the library was so popular. But I powered through because people whose thought patterns I respected, swore by it.
Then I read some blog post somewhere. I wish I could give that author the credit they deserved. It explained the fundamental building blocks of d3, the selection APIs, etc with such clarity.
Once the light bulb went off, I was able to quickly iterate on some pretty awesome totally custom stuff quickly and have sung d3’s praises ever since (it’s been 5 years).
- wattenberger 6y agoSounds similar to this guide I put together - understanding how the different modules work together and who is responsible for what is really helpful. https://wattenberger.com/blog/d3 https://wattenberger.com/blog/d3
- swyx 6y agoi can confirm that i dreadfully wished for something like this when i muddled through the freecodecamp d3 curriculum in 2017! it was especially confusing as everyone was switching from v3 to v4 right then. also, hey :)
- summitsummit 6y agocan you share that post? im of the former camp as of right now
- infogulch 6y agoPresumably, gp has forgotten. > I wish I could give that author the credit they deserved.
- summitsummit 6y agoyes, i gathered as much. they showed enough desire to give credit and enough interest and skill in the matter that i find it hopeful they could find it again if they sought it out.
- atonse 6y agoSorry I don't even remember what it looked like. But the guide from @wattenberger is in the same vain. It might have been it :-) My overall point is that if you are struggling with d3, take a step back and really try to understand the conceptual building blocks. It'll make a world of difference.
- siddboots 6y agoThese two posts by the creator, Mike Bostock, sound similar to what the gp described. https://bost.ocks.org/mike/join/ https://bost.ocks.org/mike/join/ https://observablehq.com/@d3/selection-join https://observablehq.com/@d3/selection-join
- jcheng 6y agoThat first one is what did it for me, years ago—IMHO it’s not even worth trying to form a mental model of d3 until after you’ve read that.
- tonto 6y agoThe data join thing is interesting. I'd be curious about other future opportunities for d3 to sync up more with react. Posts like this [0] show that d3 can "just generate the path" and then at that point you can use different renderers like React e.g. return <path d={line(data)}/>. It is more limited doing it this way but more ties into the react model would be wonderful https://observablehq.com/@d3/d3-line https://observablehq.com/@d3/d3-line
- jwilber 6y agoI don’t have any public codebase examples at hand, but what we’ve done at work also works quite well: basically we implement our D3 charts as a class with methods corresponding to desired lifecycle events. We then create a Component wrapper around said class and call the methods during their corresponding lifecycle events. (Idk how confusing or not that was but I wish I had a repo to share to make it clearer). There’s also a book I read while ago from Swizec Teller on d3 + react integration[0]. It may be dated by now as it’s been some time since I last read it, but it’s worth looking into! [0] https://leanpub.com/reactd3jses6 https://leanpub.com/reactd3jses6