neurofuzzy, flash game development, rich internet applications, free source code – *alt.neurotica.fuzzy*

neurofuzzy, flash game development, rich internet applications, free source code – *alt.neurotica.fuzzy*

2/27/2006

Treemap as Relational Navigation

Filed under: General — geoff @ 10:14 am

Treemap as primary navigationI’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!

Update: I’ve taken the site offline as I’m focusing on other things now.

12 Comments

  1. 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

  2. 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

  3. 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

  4. 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

  5. [...] 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

  6. 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

  7. 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

  8. 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

  9. Really smart algorithm! I will try to port it in as3…
    Thanx

    Comment by Fabio — 8/8/2008 @ 7:46 am

  10. [...] There are several projects that involve the treemap algorithm out there, but so few are user interfaces. The most famous is NewsMap by Marcos Weskamp, a navigation tool for news feed by google. Another good example come from RoomForMilk developed by NeuroFuzzy whom also did release the source code. Carl Tashian has mocked up a treemapped interface to visualize and navigate through pictures. If I do miss something neat, please let me know.  [...]

    Pingback by AbusedMedia » Blog Archive » TreeMap: recursive algorithm as user interface — 8/9/2008 @ 12:54 pm

  11. [...] 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 [...]

    Pingback by The disappearing act | cathycracks.com — 2/11/2009 @ 11:21 pm

  12. Great code indeed. I've used your code on TheStreetBullFinder to display stock picks and it's performance track record. TreeMaps are really puzzling and intriguing way of data presentation… Thanks.

    Comment by TheStreetBullFinder — 3/21/2010 @ 6:30 pm

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

 

Powered by WordPress