Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
testCommands = parseTerminal(test)
function parseTerminal(input) {
const commands = [];
for (const command of input.trim().slice(2).split(/^|\n\$ /)) {
commands.push(parseCommand(command));
}
return commands;
}
function parseCommand(input) {
const match = /^(?<name>\w+)(?: (?<param>\S+))?$/m.exec(input);
if (!match) throw new Error(`invalid command: ${input}`);
const {groups: {name, param}} = match;
switch (name) {
case "cd": return {name: "cd", path: param};
case "ls": return {name: "ls", output: input.split("\n").slice(1).map(parseLsEntry)};
default: throw new Error(`unexpected command: ${name}`);
}
}
function parseLsEntry(input) {
return input.split(/\s+/);
}
testTree = buildTree(testCommands)
function buildTree(commands) {
const root = {type: "dir", children: {}};
let node = root;
for (const command of commands) {
switch (command.name) {
case "cd":
node = (node.children[command.path] ??= {type: "dir", children: {[".."]: node}});
break;
case "ls":
for (const [size, name] of command.output) {
node.children[name] = size === "dir" ? {type: "dir", children: {[".."]: node}} : {type: "file", size: +size};
}
break;
}
}
return root;
}
visualizeTree(testTree, {width, height: 140})
visualizeTree(tree, {width, height: 3600})
function visualizeTree(tree, {inset = 10, insetLeft = 10, insetRight = 160, ...options} = {}) {
const nodes = [];
(function recurse(node, names) {
for (const name in node.children) {
if (name === "..") continue;
const child = node.children[name];
if (child.type === "dir") recurse(child, names.concat(name));
nodes.push({
name: name,
path: names.concat(name).join("/"),
size: child.type === "dir" ? sumTree(child) : child.size
});
}
})(tree, []);
return Plot.plot({
axis: null,
inset,
insetLeft,
insetRight,
...options,
marks: [
Plot.tree(nodes, {
path: "path",
text: d => `${d.name} ${d.size.toLocaleString("en")}`
})
]
});
}
sumTree(testTree)
limitedSumTree(testTree)
function limitedSumTree(tree) {
let sum = 0;
visitTree(tree, (node) => {
if (node.type === "dir") {
const nodeSum = sumTree(node);
if (nodeSum <= 100000) {
sum += nodeSum;
}
}
});
return sum;
}
function sumTree(tree) {
let sum = 0;
visitTree(tree, (node) => {
if (node.type === "file") {
sum += node.size;
}
});
return sum;
}
function visitTree(tree, visit) {
(function recurse(node) {
for (const name in node.children) {
if (name === "..") continue;
const child = node.children[name];
if (child.type === "dir") recurse(child);
visit(child);
}
})(tree);
}
input = FileAttachment("input.txt").text()
commands = parseTerminal(input)
tree = buildTree(commands)
limitedSumTree(tree)
findSmallestLargeNode(testTree, 8381165)
findSmallestLargeNode(tree, 358913)
30000000 - (70000000 - sumTree(testTree))
30000000 - (70000000 - sumTree(tree))
function findSmallestLargeNode(tree, minSize) {
let best;
let bestSize = Infinity;
visitTree(tree, (node) => {
if (node.type === "dir") {
const nodeSize = sumTree(node);
if (nodeSize < bestSize && nodeSize >= minSize) {
best = node;
bestSize = nodeSize;
}
}
});
return [best, bestSize];
}
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.
