Observable SVG

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.skypack.dev/@observablehq/runtime@4" 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