Treemap as Relational Navigation
I’m addicted to treemaps! After implementing my treemap as an addition to reverbiage, I had the crazy notion to actually use the treemap as a primary navigation element. So, I decided to launch a new site, using Slashdot stories, with the treemap allowing for relational browsing of stories. It’s called RoomForMilk. Click through the treemap and watch the map change. Browsing older/newer shows the evolution of a topic.
Update: I’ve released the source code here.
Update: Ooh, I made The Guardian!
Recently Steamed:
- 08/20/2007: Moving to the Bay Area!
- 06/12/2007: iPhone, Flash, and Multi-touch
- 06/11/2007: Apple’s Safari Browser for Windows
The result is very interesting actually - nice work.
I would be interested in resources about how to compute these treemaps
Comment by Philippe — 2/27/2006 @ 11:57 am
Very interesting application of a tree map. It’s a nice approach to using treemaps to display a network of information nodes rather than just a tree. However, having the word in the treemap is a little confusing. I would prefer the word to be the title at the top of the treemap and not included (so the treemap represents topics which are related to the selected topic). A breadcrumb trail at the top so you can see where you’ve been would be nice too.
I like the aspect ratio you got from the algorithm. Can I ask which algorithm you implemented?
Comment by Trevor Lohrbeer — 2/28/2006 @ 8:15 pm
I just found the algorithm you used on your post from the 21st. It’s a wonderful algorithm. Do you have a name for it? I’m assuming you invented it, since I haven’t seen that algorithm used anywhere else before. I’d like to use it in our treemap software as an alternative to the squarified and strip layouts.
Comment by Trevor Lohrbeer — 2/28/2006 @ 8:41 pm
Thanks. To be honest, I’m not sure, but I think it’s the pivot-by-middle algorithm, invented by Ben Schneiderman. The only difference is that I am cheating by doing a sort by size on the list before I run the algorithm on it. So, the bigger things end up at the top left, and the smallest at the bottom right. Professor Schneiderman was more concerned about retaining the natural order of the list, so methinks that made his task harder.
Another thing I didn’t mention, is that you can flip the aspect ratios depending on whether you start by splitting the map horizontally or vertically. For instance, my map is already very horizontal, and if my first slice is also horizontal, all of my subnodes will end up being very wide, which is good for text. I ended up going the other way because I thought the more square nodes were easier to see. Also, it reminded me of a Japanese Tatami room. : )
The result also seems to vary greatly depending on the number of items in your list. If you have 64 items, that’s 2 to the seventh power, so you’ll be going 7 slices deep before you start rendering actual nodes.
Comment by geoff — 3/1/2006 @ 12:01 am
[…] I stumbled across neurofuzzy. There are some interesting concept regarding the whole movement of social web and information architecture. It’s nothing new, but treemap has always intrigued me as a different way of delivering information […]
Pingback by The disappearing act at blog every brand new day — 3/23/2006 @ 5:27 am
Very interesting application of a tree map. It’s a nice approach to using treemaps to display a network of information nodes rather than just a tree. However, having the word in the treemap is a little confusing. I would prefer the word to be the title at the top of the treemap and not included (so the treemap represents topics which are related to the selected topic). A breadcrumb trail at the top so you can see where you’ve been would be nice too.
I like the aspect ratio you got from the algorithm. Can I ask which algorithm you implemented?
Comment by Tom in Cala Dor Palma de Mallorca — 10/1/2006 @ 6:15 am
Tom,
I don’t recall the name of the algorithm, but the source is posted here if you want to play with it.
Comment by geoff — 10/1/2006 @ 9:49 pm
We will integrate it soon on our Mallorca Network Project. Thanks for that nice piece of code.
Comment by Marcus — 12/24/2007 @ 1:47 pm