31:[] 2f:{"title":"Notebook Visualizer (Firefox-compatible)","cells":[{"id":0,"value":"md`# Notebook Visualizer (Firefox-compatible)\n\nTo use, paste the URL of the notebook below, or type and click submit. For more on what this graph means, see [How Observable Runs](/@mbostock/how-observable-runs).\n\nTo share a link to your dependency graph, [click here](?id=${id}).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"viewof id = {\n const getId = (v) => {\n let m;\n if (m = /(\\/$|\\.js(\\?|$))/i.exec(v)) \n v = v.slice(0, m.index);\n if (m = /^https:\\/\\/(api\\.|beta\\.|)observablehq\\.com\\//i.exec(v)) \n v = v.slice(m[0].length);\n return v;\n }\n \n const {text} = submit({\n value: getId(new URLSearchParams(html``.search).get(\"id\")) || \"@mbostock/liquidfun\"\n });\n \n text.addEventListener(\"input\", () => {\n const v = getId(text.value);\n if (v !== text.value) \n text.value = v;\n });\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"},{"id":110,"value":"viewof orient = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"viewof anon = {\n const form = html`

Include anonymous cells`;\n form.check.onclick = () => {\n form.value = form.check.checked;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.check.onclick();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"viewof impDeps = {\n const form = html` Include dependencies of imports (note that each imported cell in an \"import {...} from ...\" statement is drawn as its own node below)`;\n form.check.onclick = () => {\n form.value = form.check.checked;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.check.onclick();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"chart = dot`${dotSource}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"html`\n${DOM.download(await rasterize(chart), id, \"Download as PNG\")}\n${DOM.download(await serialize(chart), id, \"Download as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"viewof dotSource = {\n const source = `digraph \"${id}\" {\nrankdir = ${orient};\n${module.default.modules[0].variables // TODO? maybe think about how to draw the other imported modules...\n .filter(impDeps ? () => true : v => !v.from) // (Don’t) graph dependencies of imports.\n .filter(anon ? () => true : v => v.name) // (Don't) graph anonymous cells\n .map((v, i) => {\n const inputs = v.inputs || [];\n const name = v.name || `#${i}`;\n const edges = inputs.map(input => `\"${input}\" -> \"${name}\";`).join(\"\\n\"); // edges\n return `\"${name}\";` + // node (need this so \"isolated\" cells are displayed)\n (edges ? \"\\n\" + edges : \"\"); // hack to avoid extra newlines for cells with no inputs\n }).join(\"\\n\")}\n}`;\n const div = md`\\`\\`\\`\n${source}\n\\`\\`\\``;\n div.value = source;\n div.style=\"overflow:auto; height:300px\";\n div.dispatchEvent(new CustomEvent(\"update\"));\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"html`\n${DOM.download(new Blob([dotSource], {type: \"text/vnd.graphviz\"}), id+'.gv', \"Download as GV\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"module = importModule(`https://api.observablehq.com/${id}.js`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"import {importModule} from '@bryangingechen/dynamic-import-polyfill'","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {submit} from \"@mbostock/more-deliberate-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {dot} from \"@mbostock/graphviz\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}