Treemap of NPR Story tags
I’ve been working on my own treemap on reverbiage. It shows the popularity of NPR stories with particular keywords, shaded by recency. Green tiles use lame logic to determine proper names. The original idea is not mine, but I got the inspiration from here. How could I look at something like that and not try it myself?? It, like the rest of the site, is a work in progress.
The algorithm itself is very very simple. I’ll post some code soon, but here’s the gist of it:
- Take a list (array) of items as keys with their popularity as the value for each.
- Send this list to a function. This will represent a node.
- The function will chop the array in half. Then, it will take the sum of the values from each half.
- Then divide this node into two parts, one for each half of the array.
- Size the two subnodes as a percentage of their size relative to the total sum of the array.
- Recurse the subnodes into the same function, sending with them their respective half of the array.
- Alternate the visual division horizontally and vertically as depth of recursion increases.
Okay, it is simpler than how I wrote it, trust me. : )
Update: I’ve released the treemap source code here.
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



Hi, great job on the treemap. I’ve been looking around trying to find a way to do this. I’ll give your explanation a try and see how far I get.
Would you be willing to share the code?
Cheers,
Brian
Comment by Brian — 4/24/2006 @ 1:44 pm
Brian,
Yeah, I’ve got a class that I wrote… I just haven’t had time to post it. Thanks!
Comment by geoff — 4/24/2006 @ 1:54 pm
Great, I’d love to see how you handled this. They’ve predicted bad weather for the weekend which means my wife and daughter will probably sleep in and I might get an hour or two to play around with this. Who needs suduko..
Brian
Comment by Brian — 4/27/2006 @ 1:51 pm
Brian,
It’s posted here. Enjoy!
-Geoff
Comment by geoff — 4/28/2006 @ 11:39 pm
[…] Version 2.0 features a treemap for files bigger than 100k. Thanks neurofuzzy for the php-treemap source code. […]
Pingback by Disk Usage Visualized: Treemap | WordPress Designpraxis — 8/29/2007 @ 2:48 pm