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

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