Squarified Treemaps with source !!

Treemaps (sometimes called heatmaps) are one of my favorite data visualization techniques, and it has taken me a while to finally figure out how to do them. The idea is simple: Each component is represented by a rectangle whose area is proportional to the ‘weight’ or relative importance of the item. I finally did find a technical paper on the idea and have implemented it in my source code. The algorithm efficiently finds what the best dimensions should be for the rectangle keeping its length-to-width ratio as close to one as possible. The demo application reads Digg’s music news feed and draws rectangled based on the number of diggs each entry got. To really play with the application, resize the container and see the application redraw itself to respond to the change in dimensions. I think the coolest part of the code is the fact that the drawing part is fairly abstracted from the logic that computes the sizing. So to create your own ‘renderer’, all you have to do is extend the HLayoutManager and the VLayoutManager and override the draw method.

The code is released under the MIT liscense, so feel free to use it.

The DiggReader application can be seen here and the source can be seen here. Use the DiggReader.as as main class of the DiggReader application

[Update: The latest version of the library is now on GitHub. The new version decouples the dependency on nested Sprites and gives you a lot more control on elements you’d like to lay out. Also check out some fantastic examples using the library by nicoptere]

Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist.

6 thoughts on “Squarified Treemaps with source !!”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: