Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
data = {
const root = {};
const map = new Map([[".", root]]);
function get(path) {
if (map.has(path)) return map.get(path);
const i = path.lastIndexOf("/");
const node = {name: path.substring(i + 1)};
const parent = get(path.substring(0, i));
if (parent.children) parent.children.push(node);
else parent.children = [node];
map.set(path, node);
return node;
}
for (const [value, path] of source
.trim().split(/\r?\n/g)
.map(line => line.trim().split(/\s+/g))
.filter(([, path]) => path !== "total")) {
get(path).value = +value;
}
return root;
}
partition = data => {
const root = d3.hierarchy(data)
.sum(d => d.children ? 0 : isNaN(d.value) ? 1 : d.value)
.sort(sorted
? (a, b) => d3.descending(!!a.children, !!b.children) || d3.ascending(b.value, a.value) || d3.ascending(a.data.name, b.data.name)
: (a, b) => d3.descending(!!a.children, !!b.children) || d3.ascending(a.data.name, b.data.name));
return d3.partition().size([2 * Math.PI, radius])(root);
}
arc = d3.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(d => Math.max(0, Math.min((d.x1 - d.x0) / 2 - 0.001, 0.001)))
.padRadius(radius / 2)
.innerRadius(d => d.y0)
.outerRadius(d => d.y1 - 1)
format = d3.format(",d")
width = Math.max(954, 128 * Math.cbrt(d3.hierarchy(data).count().value))
height = width
radius = Math.min(width, height) / 2
fileColor = "#e4e4e4"
folderColor = "#aaa"
d3 = require("d3@5")
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.
