Use of D3 post observable

Is Observable intended to kill off the use of d3?

The effort required to use a visualization outside of the platform has skyrocketed. I can’t imagine trying to explain it to someone who is just learning d3.

Hi John,

Certainly not. Observable is an environment for writing notebooks. D3 is a JavaScript library for visualization and data. You can use Observable with D3 or with many other tools, or by itself. You can use D3 with Observable, with many other tools, and also by itself on a webpage. We don’t plan to, and wouldn’t ever want to, make Observable required to use D3 or vice-versa.

If you want to just teach D3, you can do so with the many existing resources - books like D3 in Action, or with a more traditional setup like, or however you want. There are also a few folks who choose to use Observable as part of their teaching, and it’s working quite well as far as we’ve seen. We’ve been spending time making sure that you can download and embed notebooks elsewhere, and I’ve been working on pure-JavaScript exporting, and generally trying to make interaction with the ecosystem as smooth as possible.

Observable does introduce a few new concepts: cells and notebooks instead of files, reactivity, and a few new optional operators: viewof and mutable. We totally recognize that these changes - and any changes we could make to JavaScript and programming norms - are not without cost and might require a learning curve. But we’re introducing them because we really think that they can yield a simpler, more powerful programming environment, and not just for visualizations. That they’re worth the change.

So - to sum up, Observable is intended to make writing, sharing, and understanding programs simpler and better. We understand that it’ll be a bit of change, and some folks might not want to switch immediately, and might not be convinced. Which is fine - you can still use D3 as it was before, still teach JavaScript as you have been doing.



I will put my case here:

For two years, I was working on d3 visualizations. When I first saw Observable, I was kinda pessimistic. Then I started experimenting with it. It’s a great tool, which you can use to explore things easier and faster.

For d3 related things - I use Observable for prototyping, debugging and data exploration.

To put an example: one of my visual on Observable looks like this:

I can easily change things (data) and see how relevant parts react. I also can do complex data transformations and see the output of every step at once (which is hard when you are working in traditional ways, like inside code editor, the only way is to use browser’s debugger and console )

I am then assembling parts of notebooks and putting it together locally. It looks like the bottom image now. So, I debugged the most challenging task (optimal positioning, data transformation) on Observable and then easily ported and plug solution into my actual project

1 Like