Squarified Treemaps

This has been something I have wanted to do for a while but I needed some guidance on the theory. Of course the treemap has been done a few times before (I think I saw the first implementation by marumushi I still love the design there. Since then I have seen it on a couple of other sites including CNet news). I also remember reading somewhere about someone about to release a TreeMap Flex component but I have no idea how long that will take or under what license terms. Plus I always have more trust in code I wrote since I’ll be able to debug it faster if I have to.

I am not publishing the source as yet since its needs some code cleanup, but you can look at the demo here. I have some data baked into the swf ([10,10,9,8,6,6,4,3,2,2,1]). The component then creates a series of rectangles with relative sizes reflecting the values. I have also added a redraw function listening on Stage resize, so try resizing the browser window and see how the code redraws the rectangles.

Source coming soon 🙂

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. View all posts by Arpit Mathur