Linux Interface Project

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

Using nested circles to represent a directory hierarchy has some severe shortcomings, even more so in this prototype: But there are some good points as well:

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.

©Kai Wetzel - project hosted by Logo