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
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 {Runtime, Inspector} from 'https://cdn.jsdelivr.net/npm/@observablehq/runtime@4.28.0/+esm' import define from "https://wiki.dbbs.co/assets/pages/observable-svg/index.js" let module = new Runtime().module( define, Inspector.into(output))
Here we request the current value for nodeLabels and then redefine them with a couple changes.
module.value("nodeLabels").then(nodeLabels => { module.redefine("nodeLabels", _ => { return Object.assign(nodeLabels, { "S-1": "Customer", "S-10": "Leadership" }) }) })
Here we use the same basic trick, this time with less punctuation, to set the status for a couple other nodes.
let config = "nodeStatus" module.value(config).then(old => module.redefine( config, _ => Object.assign(old, { "S-6": "unsure", "S-7": "caution" }) )) export default "<p>EOF</p>"
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