4 ms·

Not only that but: "You can download the vanilla JavaScript for any notebook by clicking Download Code in the notebook menu." So... you don't even have to do t

Not only that but: "You can download the vanilla JavaScript for any notebook by clicking Download Code in the notebook menu." So... you don't even have to do the trivial transform yourself. Provided those kinds of tools remain available I'm struggling to see the problem. I think obervable is coming from a good place and committed to making their tech as accessable as possible overall. I'm sure there's plenty of less technical users who would have shied away from just a github homepage that might get into it now.

throwawaybutwhy 5y ago
I have tried just that, and the resulting code is underwhelming, to the tune of 'import antigravity': <div id="observablehq-chart-6aa5c38e"></div> <p>Credit: <a href="https://observablehq.com/@d3/contours">Contours by D3</a></p> <script type="module"> import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js"; import define from "https://api.observablehq.com/@d3/contours.js?v=3"; new Runtime().module(define, name => { if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-6aa5c38e")); }); </script>
- jacobolus 5y ago
  The result is: import the open-source Observable runtime and then use it to run the reactive notebook code. What else would you expect? The reactive notebook code is written to work when run against the runtime. If you want to translate it to run in a different context where there is no reactivity, you are going to need to read the code and modify the parts that depend on that reactivity. For example, if a cell depends on a variable that was set to be the reactive output of an HTML slider, then you are going to need to put the slider separately into your page, and write the code yourself to hook up the slider’s event handling logic. This is not too difficult, but the notebook version is typically nicer and more legible.

throwawaybutwhy 5y ago

I have tried just that, and the resulting code is underwhelming, to the tune of 'import antigravity': <div id="observablehq-chart-6aa5c38e"></div> <p>Credit: <a href="https://observablehq.com/@d3/contours">Contours by D3</a></p> <script type="module"> import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js"; import define from "https://api.observablehq.com/@d3/contours.js?v=3"; new Runtime().module(define, name => { if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-6aa5c38e")); }); </script>

jacobolus 5y ago
The result is: import the open-source Observable runtime and then use it to run the reactive notebook code. What else would you expect? The reactive notebook code is written to work when run against the runtime. If you want to translate it to run in a different context where there is no reactivity, you are going to need to read the code and modify the parts that depend on that reactivity. For example, if a cell depends on a variable that was set to be the reactive output of an HTML slider, then you are going to need to put the slider separately into your page, and write the code yourself to hook up the slider’s event handling logic. This is not too difficult, but the notebook version is typically nicer and more legible.