-md`# Notebook Visualizer+md`# Notebook Visualizer (v3 Version)To 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 <svg viewBox="0 0 8 14" fill="currentColor" stroke="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="8" height="14"><circle r="1.5" cx="4" cy="2"></circle><circle r="1.5" cx="4" cy="7"></circle><circle r="1.5" cx="4" cy="12"></circle></svg> below to save your graph as PNG or SVG if desired. To share a link to your dependency graph, [click here](?id=${id}).`
chart = dot`digraph "${id}" { rankdir = ${orient};-${module.modules[0].variables .filter(v => !v.from) // Don’t graph dependencies of imports.+${variables.filter(anon ? () => true : v => v.name) .map((v, i) => {-const inputs = v.inputs || [];const name = v.name || `#${i}`;-return inputs.map(input => `"${input}" -> "${name}"`).join("\n")+return v.inputs.map(input => `"${input}" -> "${name}"`).join("\n");}) .join("\n")} }`
-module = fetch(`https://api.observablehq.com/${id}.js`) .then(response => response.text()) .then(text => new Function(`${text.slice(0, -26)} return notebook;`)())+variables = { return fetch(`https://api.observablehq.com/${id}.js?v=3`) .then(response => response.text()) .then(text => { const r = runtime(); new Function( "runtime", "observer", `${fakeImports.join(" ")}${text.slice( text.indexOf("(runtime, observer) {") + 21, -2 )}` )(r, observer); return r.variables; }); }