I’ve learned D3js from a book, it’s called D3 for the Impatient and the author does a pretty good job conveying the nitty gritty of D3 provided the reader knows significant Javascript. I believe the book is based on d3 4.0 or 5.0. The current version is 7.5.0 and there have been major changes since the book was written. I’m not sure how to implement them because documentation around current d3js is tightly bound to Observable and like the book says, I’m not patient. I don’t wish to learn Observable, I don’t care for it. Why are we forced to use it? Is there a way around it? I’m definitely not the first to ask this:
Definitely not the first! There was a looooong thread about this in the forum, stretching from May 2019 to January 2021 before ultimately being locked, hah: I want to learn D3. I don`t want to learn Observable. Is that ok?
Oh actually I see you in there! So I guess you’re all caught up. The official examples are on Observable these days, and we can’t really maintain two versions of them. Does it at least help that the API docs are totally separate from Observable?
Are there particular pieces that you’ve found especially tricky? Like are you stuck on something right now? I’d be happy to hop on a call and try to help.
We talk sometimes about what a modernized d3js.org homepage might look like. For me two big things have changed: (1) modularization, and (2) the proliferation of different environments — vanilla, React, Svelte, Observable, etc. — each with its own demands. We could at least have one or two basic examples per environment.
2 Likes
To be frank, if you lack the patience to work through the available examples (both official and unofficial), you may want to consider taking a paid course instead that condenses the material and guides you through it.
Since you linked that discussion, you may also want to read through it in its entirety. You will discover that the final comment by the author was:
Good points - I concede my argument is flawed.
I agree that an open source project does not owe anyone detailed tutorials in their preferred format.
I’ll consider contributing to a vanilla JS D3 tutorial in future.
3 Likes
Absolutely! Why didn’t I check them before? Doh. Consider this matter settled.
Any ones you recommend? The well written API docs have half the answers. I suppose I still need to learn Observable to implement sketches into non-Observable pages.
It was the final comment because the thread was closed. 
2 Likes
Here are a few good paid courses (among lots of other helpful learning resources)
2 Likes
I remember the first time I was trying to find some D3 code to accomplish a specific task and landed on an Observable notebook from a Google search; it was this collapsible tree notebook from 2018. I had already been programming with Javascript and D3 for a while and thought I was pretty decent at it. At least, I could produce some pretty cool things. This notebook was different, though. I could experiment with it but was definitely baffled why a simple change in one cell would affect others - without explicit execution. I could tell there was something to this new tool but I also had a pretty specific task at the moment. I’m pretty sure this was prior to Observable’s embedding features were added, too, so I really just needed to get this damn thing working.
So… I set up my wepage and starting copying code that didn’t work right away. I had no clue what this width thing was that didn’t seem to be defined anywhere but I figured it had something to do with the width of something so I defined it to be 1000 or so and, well, that seemed to help. I fiddled with some more stuff and after an hour or two I had a working webpage that did pretty much what I wanted.
At that particular moment, I was pretty happy to have what I needed but was not particularly happy with this new thing called Observable. Nonetheless, it seemed likely that there was something of importance lurking in the background. I tucked it into a bookmark and figured I’d check it out at the end of the semester.
I did just that.
If you genuinely want to learn how to program using D3 in a vanilla HTML/JS environment, then you might consider visiting with Observable’s D3 Gallery and start converting those to vanilla. I guarantee you will learn a lot! You’ll also make an important contribution to open source.
As a first contribution, I’ve converted the collapsible tree to vanilla; you can find the result here:
1 Like