2f:null 30:["$","title",null,{"children":"Notebook Visualizer with color | Sylvain Lesage | Observable"}] 35:[] 33:{"id":"49a88fdbbcb4c3c3","slug":"notebook-visualizer-with-from","title":"Notebook Visualizer with color","thumbnail":"67c450b6666e4d88391844b0f8c02a447f4e2d00c94ce9c306e4d5d1d7835e25","access_level":"public","create_time":"$D2019-06-14T13:55:48.357Z","update_time":"$D2019-08-29T22:56:53.850Z","view_time":null,"first_public_time":"$D2019-06-14T14:15:14.412Z","has_unpublished_edits":null,"fork":{"id":"f6ca568219953fee","slug":"notebook-visualizer","title":"Notebook visualizer","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":9,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":218,"publish_version":218,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"6a21a5b27d47e8d7","slug":"observable","title":"Observable","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"type":"notebook","body":{"title":"Notebook Visualizer with color","cells":[{"id":0,"value":"md`# Notebook Visualizer with color\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](/@mbostock/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:\n new URLSearchParams(html``.search).get(\"id\") ||\n \"@mbostock/liquidfun\"\n });\n text.addEventListener(\"input\", () => {\n let v = text.value,\n 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)))\n 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":214,"value":"viewof show = checkbox({\n title: \"Include nodes:\",\n options: [\n {\n value: \"anonymous\",\n label: `anonymous cells`\n },\n {\n value: \"initial\",\n label: `initial`\n },\n {\n value: \"mutable\",\n label: `mutable`\n },\n {\n value: \"viewof\",\n label: `viewof`\n },\n {\n value: \"stdlib\",\n label: `standard library`\n },\n {\n value: \"from\",\n label: `another notebook`\n },\n {\n value: \"libs\",\n label: `libraries`\n }\n ],\n value: [\"stdlib\", \"viewof\", \"mutable\", \"from\", \"libs\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"chart = {\n function node(name) {\n return `\"${name}\" [color=${getColor(name)} fontcolor=${getColor(name)}]`;\n }\n function link(orig, dest) {\n return `\"${orig}\" -> \"${dest}\" [color=${getColor(orig)}]`;\n }\n return dot`digraph \"${id}\" {\n rankdir = ${orient};\n ${notebook.modules[0].variables\n .map((v, i) => {\n const dest = v.name || `#${i}`;\n const origs = v.inputs || [];\n const from = notebook.modules.find(m => m.id === v.from);\n const elements = [];\n if (!isHidden(dest)) {\n origs.forEach(orig => {\n if (!isHidden(orig)) {\n elements.push(link(orig, dest));\n elements.push(node(orig));\n }\n });\n elements.push(node(dest));\n }\n return elements.join(\"\\n\");\n })\n .join(\"\\n\")}\n \n }`;\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":212,"value":"colors = ({\n anonymous: \"gray\",\n from: \"lightseagreen\",\n initial: \"mediumpurple\",\n libs: \"lightseagreen\",\n mutable: \"mediumpurple\",\n normal: \"black\",\n stdlib: \"mediumpurple\",\n viewof: \"mediumpurple\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"stdlib = require(\"@observablehq/stdlib\").then(stdlib => [\n \"invalidation\",\n \"visibility\",\n ...Object.keys(new stdlib.Library())\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"function getCategory(name) {\n const v = notebook.modules[0].variables.find(v => v.name === name) || {};\n if (name[0] === \"#\") {\n return \"anonymous\";\n } else if (stdlib.includes(name)) {\n return \"stdlib\";\n } else if (name.indexOf(\"viewof \") === 0) {\n return \"viewof\";\n } else if (name.indexOf(\"initial \") === 0) {\n return \"initial\";\n } else if (name.indexOf(\"mutable \") === 0) {\n return \"mutable\";\n } else if (\"inputs\" in v && v.inputs.includes(\"require\")) {\n return \"libs\";\n } else if (\"from\" in v) {\n return \"from\";\n } else {\n return \"normal\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"function getColor(name) {\n return colors[getCategory(name)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"function isHidden(name) {\n const category = getCategory(name);\n return category !== \"normal\" && !show.includes(category);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"notebook = fetch(`https://api.observablehq.com/${id}.js`)\n .then(response => response.text())\n .then(text => new Function(`${text.slice(0, -26)} return notebook;`)())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {submit} from \"@mbostock/more-deliberate-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"import {dot} from \"@mbostock/graphviz\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 34:"$33:body"