To start off, I’d like to mention my admiration for the community and team that has made observable what it is today. I and many others, appreciate having a place to chat, and design D3 data visualizations.
However, when i look at observable from the perspective of a project manager, or team leader, or even as an individual that is looking to expand ones knowledge on the subject of data visualization. I struggle to see how any of the examples on this site can be used in a practical way.
Stripping away the observable runtime is time consuming and painful. In business that means dollars wasted, so why would any project manager want to recommend observable as a resource for their team ?
As we all know data visualization, is centered around data, and in today’s age data can be worth more than gold. The common response “You can just embed the notebook in any site” is a moot point, and is not a practical thing to do, among many things, there are just to many security risks.
As a developer, i’m not able to contribute to the community even though i have d3 and dc-js experience. There are just to many extra steps.
I just would like to understand, what the overall scope is. Will we one day see a “import/export vanilla js” function ? OR is observable hoping to replace the status quo and shift the entire D3 developer community to the observable way of doing things ?
In my opinion, without the “import/export vanilla js” feature on the road map, Observable HQ can’t grow to the size it wants to be, and its not the “sharing tool” that myself and so many others want it to be.
Thanks for posting this. Many of your points are around the Observable runtime, and how to extract it from your downloaded code. I would like to share our thoughts on this.
Firstly, just as a baseline…
The Observable runtime is a very small open-source library that serves to enable dependent evaluation of code in cells on Observable (reactivity), as well as providing a standard library of functions (not unlike many other JavaScript libraries).
When you download your notebook’s code (from the notebook menu) you get a vanilla JavaScript application that can be run anywhere - completely disconnected from Observable. Yes, the application would include the Observable runtime, but it is still JavaScript. And you get the benefit of having a complete application where inputs and outputs are connected in the same reactive way as they are in your notebook on Observable.
If, however, you are interested in using the code in your notebook in an application with your own controls/selectors (for example using standard React controls), you can structure your notebook with that in mind and write the rendering code as JavaScript functions in your notebook, which you can then simply copy to your final platform once you are happy with the output without the need for the Observable runtime. In fact, most of what you see on this wonderful site was developed on Observable and then connected into a React application using this approach. This gives you the ease of rapid iteration and collaboration through the prototyping phase and then deploying the final product on your own platform.
We are hoping that, for many people, the tiny Observable runtime would not be a barrier they would simply use the downloaded code as-is in their external applications. We have a repo with a number of examples showing how you can do that.
Further reading…
Toph Tucker wrote this very nice annotated version of a downloaded notebook to explain what is in the downloaded code. To quote the last sentence, “If you pull out one of these functions, it’s plain JavaScript, and if you call it with the same arguments, you’ll get the same result.”
As the ecosystem becomes more mature, we’d love to explore more ways of transpiling an Observable notebook to other contexts. Tom MacWright’s ‘Notebook distiller’ shows an example of what’s possible.
Agree with what @Cobus said. Downloading the entire code (click top right “…” button, then Export → Download code) allows you to host on the notebook on own server.
If you want to package it as a single page app, just a little bit of entry-level HTML/CSS is needed.
Here’s a dashboard I developed wholly in Observable, then exported out to my own server, with custom CSS.