pebbles - using Circular Treemaps to visualize disk usage

During the 1990s Ben Shneiderman of the Human-Computer Interaction Laboritory (HCIL) of the University of Maryland invented Treemaps as a "compact visualization of directory tree structures". Treemaps involve "turning a tree into a planar space-filling" representation.

Unlike other variations such as squarified treemaps, or cushion treemaps, circular treemaps as presented here could be considered an evolutionary dead-end (rejected early by Ben Shneiderman) but at least I think it's a pretty one.

Learn more about the history of treemaps at Ben Shneiderman's treemap page.

(The idea for my variant came when looking at an X11 screensaver showing hyperbolic geometry as an arrangement of circles.)

Implementing circular treemaps

• They don't fill the available space completely.
• They fill the available space to a varying degree which in the case of nested tree structures leads to the problem that circles of the same size could represent files (or folders) of a vastly different size.
• The algorithm I used is very slow, and drawing is likely to always be slower then nested boxes.
• My algorithm to find a decent bounding circle sucks.

• Zooming in on directories could be very fast because the layout doesn't need to be recalculated.
• The aspect ratio of nodes is always the same.

For the following screenshots I generated SVG files for the circular treemaps and took a screenshot of the image shown in the SVG viewer. You can click on the images to see a larger screenshot.

The first screenshot shows a simple test case of the circle layout algorithm I used.

Using cicular treemaps to show disk usage of a folder

The following screenshots show circular treemaps as they would show real directories: my ~/doc, ~/, and ~/src (where space usage ofthe algorithm is even worse than in the other two examples.)

Directory names could be overlayed but the SVG viewer I have doesn't show fonts properly.

Colorize by age (modification time) or time of last access

The file circles could be filled with different colors, depending on their age. In this screenshot red circles represent newer files while soft yellow circles represent older files.

Colorize by file type

Alternatively, the file circles could be colored by file type. In these two examples colors represent images, archives, documents, etc. I didn't yet find a set of colors which doesn't look ugly against the dark background, unfortunately.

Maybe hue could represent file types and lightness could show modification or access times showing both dimensions in the same image.

Integrate cicular treemaps as a folder preview method in a file manager

To make at least some use of the idea, I took snapshots of each of the directories in my home tree and installed them as customized folder preview icons which Nautilus allows. I guess this could be automated by a cron job to keep them in sync.

I've put together a very simple prototype, available at this project's download page, but I wouldn't recommend trying out that old version since I hope to make a new Java demo available for download soon. :-)

If you have any comments just drop me a line. I also need a better name, I think "circular" treemaps doesn't cut it. Maybe pebble treemaps or just pebble maps ? Ideas welcome.