@jashkenas
Used to work on @observablehq β€” still think it rocks. 🏍 🌎 πŸ‘Ά
Published (unlisted)
1Β Like
Insert cell
Changed in fork
-
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}).`
Insert cell
Insert cell
Insert cell
Insert cell
Changed in fork
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")} }`
Insert cell
Insert cell
Changed in fork
-
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; }); }
Insert cell
Added in fork
Insert cell
Added in fork
Insert cell
Added in fork
Insert cell
Insert cell
Insert cell