Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
data = {
const rootKeys = name.split(",").map(name => name.trim());
const roots = new Map;
const parentKeys = new Set(rootKeys);
const nodeKeys = new Set, nodes = [];
const edgeKeys = new Set, edges = [];
let invalid = false;
invalidation.then(() => invalid = true);
for (const parentKey of parentKeys) {
const source = await load(parentKey);
const sourceKey = id(source);
let sourceRoots = roots.get(sourceKey);
if (!sourceRoots) roots.set(sourceKey, sourceRoots = new Set);
for (const root of rootKeys) if (root === parentKey) sourceRoots.add(root);
for (const dep of deps) {
if (!(dep in source)) continue;
for (const [name, version] of Object.entries(source[dep])) {
const target = await load(`${name}@${version}`);
const targetKey = id(target);
const edgeKey = `${sourceKey}\t${targetKey}`;
let targetRoots = roots.get(targetKey);
if (!targetRoots) roots.set(targetKey, targetRoots = new Set);
for (const root of sourceRoots) targetRoots.add(root);
parentKeys.add(targetKey);
if (!edgeKeys.has(edgeKey)) edgeKeys.add(edgeKey), edges.push([sourceKey, targetKey]);
yield {nodes, edges, roots};
if (invalid) break;
}
}
if (!nodeKeys.has(sourceKey)) nodeKeys.add(sourceKey), nodes.push(sourceKey);
yield {nodes, edges, roots};
if (invalid) break;
}
}
colors = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf", "#999999"]
load = {
const cache = new Map;
return function(key) {
let value = cache.get(key);
if (!value) cache.set(key, value = require.resolve(`${key}/package.json`)
.then(url => fetch(url))
.then(response => response.json())
.then(json => (cache.set(id(json), json), json)));
return value;
};
}
function id(node) {
return `${node.name}@${node.version}`;
}
dot = require("@observablehq/graphviz@0.2")
import {Select, Text, Checkbox} from "@observablehq/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
