I want to learn D3. I don`t want to learn Observable. Is that ok?

Hello!

As we’ve been creating more D3 documentation and examples on observable (and more is coming…), I agree we have to be careful about this issue.

First, note that there is a lot of fantastic learning material out there — in very different forms (blocks, codepens, independent web pages, etc) — and a lot of them are linked from D3’s gallery and READMEs. But many authors are moving to Observable and creating exciting new stuff (testimony to how useful and productive the system is), so it’s unavoidable that more links will be made with these new examples.

Strictly speaking about the series of examples at https://observablehq.com/@d3 that are linked to from the API documentation:

Ideally, one should be able to read them statically (as if in a book), and copy-paste to a web page or a node script without needing too many adaptations.

In general, we’re trying to avoid Observable’s facilities, and prefer e.g. d3.create("svg").attr("width", width).attr("height", height).node() over DOM.svg(width, height) so that the code works almost immediately in the browser or in node.

However, sometimes it would add too much complexity not to use them:
viewof t = slider() might help people mess around with the values more than an editable cell with t = 300. The primary goal is to help people understand what the documented functions do.
— asynchronous loading of data in its own cell is much simpler & easier to understand than promises and callbacks
— using the built-in width to make the notebook responsive
— etc.

A separate issue is that the code in observable is fragmented into independent cells, which makes it difficult to copy / paste all in one swoop. Again, it helps to understand when you’re reading it, but gives you more work when you just want to reuse it. I have no good solution for this at the moment.

Maybe a tool, or a tutorial, could help with the necessary changes — things like replacing require by <script>, using async/await explicitely, etc.

Finally, I agree that it would be great to also have more D3 examples that could be directly usable offline (in node). I certainly learned a lot with d3-geo’s test and bin scripts. But this type of link “Try d3-zoom in your browser.”? — I’m not sure anyone could learn anything from that.

7 Likes