function formatBlocks(blocks) {

var unit = 'k'
var num = blocks / 2;
if (num > 512) {
    num /= 1024;
    unit = 'M'
}
if (num > 512) {
    num /= 1024
    unit = 'G'
}
return num.toFixed(1) + unit

}

function subdraw(ctx, dirtree, left, width, top, height) {

ctx.save()
ctx.strokeRect(left, top, width, height)
ctx.beginPath()
ctx.moveTo(left, top)
ctx.lineTo(left + width, top)
ctx.lineTo(left + width, top + height)
ctx.lineTo(left, top + height)
ctx.closePath()
ctx.clip()

ctx.font = '16px sans-serif'
ctx.fillText(formatBlocks(dirtree.blocks) + "(" +  dirtree.name + ")", left + 1, top + 16, width)

ctx.restore()
var y = top
var children = dirtree.children.sort(function (a, b) {
    return b.blocks - a.blocks
})
for (var i = 0; i < children.length; i++) {
    var child = children[i]
    var h = height * child.blocks / dirtree.blocks
    subdraw(ctx, child, left + width, width, y, h)
    y += h
}

}

function draw(canvas, dirtree) {

var ctx = canvas.getContext('2d')
subdraw(ctx, dirtree, 10, 200, 10, 800)

}

var canvas = document.createElement('canvas') canvas.setAttribute('width', '800') canvas.setAttribute('height', '800') document.body.insertBefore(canvas, null) draw(canvas, dirtree)