3 ms·
I have tried just that, and the resulting code is underwhelming, to the tune of 'import antigravity': <div id="observablehq-chart-6aa5c38e"></div> <p>C
by 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 agoThe 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.