Published unlisted
Edited
Jun 14, 2019
1 star
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
function runtime() {
const variables = [];
return {
module: () => ({
variable: () => ({
define: (a, b, c) => {
variables.push({
name: b != null && typeof a === "string" ? a : undefined,
inputs: Array.isArray(a) ? a : Array.isArray(b) ? b : []
});
}
}),
import: (...args) => {
const imports = args.slice(0, -1);
imports.forEach(name => {
variables.push({ name, inputs: [] });
});
},
derive: () => {}
}),
variables
};
}
Insert cell
Added in fork
fakeImports = Array(100)
.fill(0)
.map((n, i) => `const define${i + 1} = null;`)
Insert cell
Added in fork
observer = () => {}
Insert cell
Insert cell
Insert cell