Treemap on Rails

by Rob Orsini

You may have used the Active Record "acts_as" extensions that ship with Rails, such as acts_as_list, or those added by third-party plugins, such as acts_as_attachment. In this post I'm going to cover how to use a new plugin for Rails by Andrew Bruno, called acts_as_treemap.

What is a Treemap?

A Treemap is a diagram that allows you to easily visualize hierarchical information, or trees. The first treemap was used to visualize the directory structure of a filesystem; to make it very easy to identify the disk-hogs (files taking up a disproportionate amount of disk space) on a system with very limited resources. A more recent example of a treemap is one that Tim O'Reilly has posted on O'Reilly's Radar that shows recent trends in programming language book sales.

The following treemap show two dimensions of information: Square size represents sales volume, and color represents rate of growth.

Book Sales

In order to represend your data with a treemap, your data must be modeled as a tree. The tree data model is much like that of an XML document, where there's a root or parent node, and zero or more child nodes. Each subsequent node may have it's own children, and so on.

In SQL, this structure is simple to set up. You create a field that serves a the primary key (in Rails that's always "id"), and another field that stores the parent id of each record (e.g. "parent_id"). Note that the root node will have a parent_id of "NULL." There can be more fields, of course, but these are all that are required to structure records as a tree.

The following diagram shows the relationship between data in a table (A), a tree structure (B), and a treemap(c).

Tree Structure

I've posted a full how-to for Andrew's acts_as_treemap Rails plugin over at Please feel free to experiment with it and report back about your experience. Please visit: Using acts_as_treemap with Rails


2006-07-27 15:38:09
I tried writing a treemap viewer that could use any graph as a tree once...

It didn't work out so well.

2006-08-03 09:31:15
The O'Reilly example isn't really a tree map -- the data is flat, not hierarchical. Conceptually it's no different than a pie chart of sales, colorized by sales growth. It looks cooler as an area map than as a pie chart though.
Rob Orsini
2006-08-03 09:59:48
@Jim - Tim's example is, in fact, a tree map. I think this image from the same tool should make that more apparent:

That image should make it clear that the Bookscan data consists of a hierarchy of categorization. I guess I should have used that image in the post instead.