All charts/Trees & packs

What fills the disk

A flat treemap: one level, one colour.

1 The data hierarchy/disk.php php

<?php

  // The folders of a home directory and their size in gigabytes, read the way du -s would.

  $disk = [
    [ 'folder' => 'Photos',     'gb' => 184 ],
    [ 'folder' => 'Videos',     'gb' => 142 ],
    [ 'folder' => 'Music',      'gb' =>  61 ],
    [ 'folder' => 'Projects',   'gb' =>  48 ],
    [ 'folder' => 'Downloads',  'gb' =>  37 ],
    [ 'folder' => 'Documents',  'gb' =>  22 ],
    [ 'folder' => 'Games',      'gb' =>  19 ],
    [ 'folder' => 'Mail',       'gb' =>   8 ],
    [ 'folder' => 'Desktop',    'gb' =>   4 ]
  ];

?>

2 The chart tag hierarchy/disk.pad pad

{chart 'treemap', data='disk', label='folder', value='gb', title='Gigabytes per folder', width=640, height=420}

3 The result inline SVG · no JavaScript