partition = data => {
const root = d3.hierarchy(data)
.sum(d => d.size)
// sort by size, then by name for depth 3 (bloat/heap)
.sort((a, b) => a.depth != 3 ? b.value - a.value : b.name - a.name);
return d3.partition()
.size([2 * Math.PI, root.height + 1])
(root);
}
formatBytes = (bytes, decimals) => {
if (bytes == 0) return '0 Bytes';
const k = 1024;
const dm = decimals <= 0 ? 0 : decimals || 2;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
arc = d3.arc()
.startAngle(d => d.x0 / 2 + startAngle)
.endAngle(d => d.x1 / 2 + startAngle)
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(radius * 1.5)
.innerRadius(d => d.y0 * radius - 10)
.outerRadius(d => d.depth == 3 ? d.y0 * radius : Math.max(d.y0 * radius, d.y1 * radius - 1 - 10))
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.
