CFUnited Demo – Axiis Treemaps

Yesterday Tom Gonzalez and I gave a presentation on Axiis at CFUnited. After Tom reviewed the concepts behind the framework, I demonstrated how to build a custom visualization. The resulting application showed a squarified treemap representing the make up of Axiis, Degrafa, Flex, and the Flex Data Visualization framework. I cleaned up the code from the presentation, added some pretty fills, and committed it to the development branch of the repository. You can view the results here and the source here.

In the treemap, the area of the main rectangle represents the number of lines of code in the selected framework, and the smaller rectangles are sized proportionally based on the number of lines of code in each class. The rectangles are colored based on the percentage of methods marked private. Red rectangles represent classes that are mostly private while green rectangles show classes that are more public or protected. The more intense the color, the further the classes is from being 50% private. It’s a pretty meaningless metric, but it demonstrates what the treemap can do.

This entry was posted in Axiis, Flex, Information Visualization. Bookmark the permalink. Both comments and trackbacks are currently closed.


  1. Posted January 22, 2010 at 8:29 pm | Permalink

    Cool. As someone who has built treemaps before, I’d recommend switching the squarified layout to a non-recursive implementation if you plan to work with a lot of data. The recursive version can result in stack overflows once the number of items goes into the thousands.

  2. Posted May 7, 2010 at 11:58 pm | Permalink

    Awesome work. Now the TreeMap is looking more clear. I have a requirement where I need to show the sub-Squares into the rectangle. Could you please provide me the syntax how I can add the sub “SquarifiedTreemapLayout”. I have added the “SquarifiedTreemapLayout” but it is not showing arrenged into the rectagle. It’s overlaping.
    Thanks in advance.