How might we use ObservableHQ's libraries within wiki? The Runtime invites experimentation. Marc's efforts to create a diagram for sofi provides a suitable challenge. README
SVG nodes and edges. source
Labels for nodes and edges
import {html, svg} from "https://cdn.skypack.dev/htl" import {Runtime, Inspector} from "https://cdn.skypack.dev/@observablehq/runtime@4" // attach imports to window for testing in the console Object.assign(window, {html, svg, Runtime, Inspector})
We used ObservableHQ's interface to construct and export a notebook and upload its code into an assets folder. We import define() from that asset and use the Observable Runtime to display the notebook in a frame.
import define from "https://wiki.dbbs.co/assets/pages/observable-svg/534bfbf80986e1aa@598.js" const runtime = new Runtime() runtime.module( define, Inspector.into(output)) export default `<em>Circles</em>`
We prepend a <div> to hold some controls.
output.insertAdjacentHTML("beforebegin", ` <div id="controls"> <button></button> </div> `)
In the frame below we can view the results.
//wiki.dbbs.co/assets/pages/js-snippet-template/importjs.html HEIGHT 2000
.
observablehq/stdlib github
Standard Library notebook
observablehq/inputs github
Observable Inputs notebook
Advanced Embedding and Downloading notebook
pages/observable-svg