2d:null 2e:["$","title",null,{"children":"Notebook visualizer Elk edition | Observable | Observable"}] 33:[] 31:{"id":"d6bb2070518b9928","slug":"notebook-visualizer-elk-edition","title":"Notebook visualizer Elk edition","thumbnail":"2f2e5dd8839a1b3b9c7278c830d4ece9aca453c87c20f460672688c5b7ff8b83","access_level":"public","create_time":"$D2019-10-07T20:44:29.570Z","update_time":"$D2023-02-16T04:44:47.938Z","view_time":null,"first_public_time":"$D2019-10-07T21:34:43.237Z","has_unpublished_edits":null,"fork":{"id":"f6ca568219953fee","slug":"notebook-visualizer","title":"Notebook visualizer","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":77,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":455,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"group","id":"c4990be612f2da51","login":"8788045797a2fd14","name":"Product Education","avatar_url":null,"tier":"public","role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":30,"collection":{"id":"ffcf9bd0f1dd9ea0","slug":"visualizing-debugging-notebooks","title":"Debugging","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Notebook visualizer Elk edition","cells":[{"id":0,"value":"md`# Notebook visualizer _Elk edition_\n\n_🌶 Like the [notebook visualizer](https://observablehq.com/@observablehq/notebook-visualizer), but using [elkjs](https://github.com/OpenKieler/elkjs) and [my tiny rendering notebook](https://observablehq.com/@tmcw/elk) for a beautiful orthogonal layout._\n\nTo use, paste the URL of a public or shared notebook below, or type and click submit. For more on what this graph means, see [How Observable Runs](/@observablehq/how-observable-runs). Use the cell menu below to save your graph as PNG or SVG if desired.\n\nTo share a link to your dependency graph, [click here](?id=${id}).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof id = {\n const {text} = submit({\n value: new URLSearchParams(html``.search).get(\"id\") || \"@mbostock/liquidfun\"\n });\n text.addEventListener(\"input\", () => {\n let v = text.value, m;\n if (m = /\\.js(\\?|$)/i.exec(v)) v = v.slice(0, m.index);\n if (m = /^[0-9a-f]{16}$/i.test(v)) v = `d/${v}`;\n if (m = /^https:\\/\\/(api\\.|beta\\.|)observablehq\\.com\\//i.exec(v)) v = v.slice(m[0].length);\n if (v !== text.value) text.value = v;\n });\n text.addEventListener(\"paste\", () => {\n Promises.delay(50).then(() => {\n text.form.dispatchEvent(new CustomEvent(\"submit\", {cancelable: true}));\n });\n });\n return text.form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"viewof orient = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"viewof show = {\n const form = html``;\n form.value = {anon: false, builtin: true};\n form.anon.onclick = form.builtin.onclick = event => {\n form.value = {...form.value, [event.currentTarget.name]: event.currentTarget.checked};\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"viewof graph = {\n let children = [];\n let edges = [];\n let eId = 0;\n for (let v of variables) {\n children.push({\n label: v._name || `#${v._id}`,\n id: v._name || `#${v._id}`,\n fill: v._module === main._runtime._builtin ? 'blue' : '#000'\n });\n for (let i of v._inputs) {\n edges.push({\n id: `e${eId++}`,\n targets: [v._name || `#${v._id}`],\n sources: [i._name || `#${i.w_id}`]\n });\n }\n }\n let graph = {\n id: 'root',\n layoutOptions: { algorithm: 'layered', favorStraightEdges: true , 'elk.direction': orient},\n children,\n edges\n };\n let g = await elky(graph);\n g.value = graph;\n g.dispatchEvent(new CustomEvent('input'));\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"main = import(`https://api.observablehq.com/${id}.js?v=3`)\n .then(async ({default: define}) => {\n const runtime = new Runtime();\n const main = runtime.module(define, name => show.anon || name);\n await runtime._compute();\n runtime.dispose();\n return main;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"variables = Array.from(main._runtime._variables, (v, i) => (v._id = i, v))\n .filter(v => !isimport(v) && v._reachable)\n .filter(v => show.anon || v._name !== null)\n .filter(v => show.builtin || v._module !== main._runtime._builtin)\n .map(v => ({\n _module: v._module,\n _name: v._name,\n _id: v._id,\n _inputs: v._inputs\n .map(i => isimport(i) ? i._inputs[0] : i)\n .filter(i => show.builtin || i._module !== main._runtime._builtin)\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"isimport = v => v._inputs.length === 1 && v._module !== v._inputs[0]._module","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"Runtime = (await require(\"@observablehq/runtime@4\")).Runtime","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {submit} from \"@mbostock/more-deliberate-inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"import { elky } from \"@tmcw/elk@260\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"