View it here.
Download the source files here.
Released under Creative Commons Attribution license, which means you can use it for anything, as long as you give me credit. It was a two-day project from months ago, so I can't remember all the details. The treemap is divided into regions representing different categories of blog posts. Each square represents a post, and its area is relatively proportionate to the number of comments in each post. In other words, the more interest in a post, the larger its area. The lightness of each rectangle's color reflects its recency, so the most recent posts should have the lightest colors (see below for details on HLS-RGB conversion algorithm).
The source code contains some interesting MT blog classes I wrote to make the project work: Blog Data Provider, Blog-to-TreeModel converter, Movable Type XML Parser and convertor to the Blog Data Provider.
The TreemapDisplay component has some interesting code snippets you might find useful: recursive squarified treemap layout algorithm based on code by Ben Bederson (read full text for links), renderer based on the results of the layout algorithm, and an HLS-to-RGB conversion algorithm. I ported the HLS-to-RGB algorithm from some free code in some language I'd never seen before, I think it was called "Delphi" or something like that. You really need an HLS-to-RGB converter for treemaps because you can use lightness and saturation as an extra visual indicator, in addition to size, for comparing different values in the treemap.
Please click on the "more" link below to read the rest of the story, lots of interesting stuff in this post! By the way, I apologize if you came to this website looking for the original research information on treemaps... my high ranking in google is a side-effect of the whole blog phenomenon, and sometimes my site gets ranked 2nd or 3rd on search topics out of proportion to the meta intentions of the content. However, I've got lots of useful links in the full text of this post if you want quick access to the most useful resources on treemaps.
UPDATE: Looks like there's a bug in my layout algorithm... can you see what it is?
ORIGINS OF THE PROJECT
I first learned about treemaps during grad school in my favorite class, SI682 Information Visualization, first taught by Dr. Furnas, and then taught by Dr. Mirel. I missed Dr. Furnas' class because I didn't have the prerequisites to take it before he left for sabbatical, but he let me audit his lectures. The next year, I got to attend the class for real, with Dr. Barbara Mirel as the instructor. She introduced us to many of the same info-vis papers and models as Dr. Furnas, but she came from an applied usability engineering background at Lucent and made user-testing a major component of our class projects on info-visualization. I think the usability aspect gave the course a stronger practical value, especially for someone like me who likes to build prototypes instead of just read about them.
I was building prototypes during and after class during the whole semester: radial layout, really bad fisheye views, elastic windows, magic lenses, query filters, etc. I think treemap and fisheye view visualizations gave me the most trouble because I was trying to build prototypes based on the original research papers, which focused on the underlying theory. I didn't know that I could find papers that explained algorithms for actually implementing these darn things. Eventually, I found the Sarkar-Brown distortion algorithm (see earlier posts on my fisheye-view listbox component).
I've spent the past year doing something totally different, building real-time collaborative environments, but a few months ago, I took a weekend to give treemaps another go as a way of keeping up my interest in HCI research.
RESOURCES FOR TREEMAPS
SmartMoney.com offers a treemap of the stock market, and when Dr. Mirel demonstrated the applet in class, I instantly wished we could do something like this in Flash. A few months ago, I decided to give treemaps another try, and found more information at the University of Maryland's HCIL website. They have a whole section devoted to treemaps, including papers, sample code, and applets.
I had some difficulty translating the Java code into Actionscript because of the idiosynchracies in Flash MX's object model and library symbol linkages, but hey, it sure beats the pants off of coding graphics by hand in Swing :)
I think the squarified layout offers the most aesthetically pleasing arrangement because the human eye can compare surface area more easily if the width/height aspect ratio is closer to 1. The slide-and-dice layout has awful aspect ratios, and makes you feel like your comparing zebra stripes with a vertigo effect. Currently, my favorite research paper (in terms of writing style, content, and clear sequence of explanations), is "Squarified Treemap", by Bruls, Huizing, and van Wijk.
ABOUT THE SOURCE CODE
The treemap display component follows the MVC model. You have a treemap display component which accepts a Tree Data Model. Unfortunately, Actionscript doesn't support interfaces or strong typing, so you'll just have to take my word that the component design is as close to Java as I could manage. I might have gone overboard on object-oriented design a few months ago when I was playing around with Visual Studio, and got too used to playing in a clean OOP language. Other interesting tools built in the course of this project include a special Blog Data Model, a plugin-based blog parser for different blog types, and a BlogData-to-TreeModel converter. They're all in the source code, including the MT template.
Again, I wrote all of this stuff in 2 days, and haven't touched it for months, so please be patient (or volunteer some help) if you want documentation. Hope you enjoy this code :-)
-Sam
Posted by samuel at July 28, 2003 05:35 PM