The other day, I mentioned that I’ll be releasing an open source version of my Flex 2 TreeMap component. I need just a bit more time to make some finishing touches. Plus, I’ll be spending the next week finding a new apartment, moving in, and starting a new job. To keep you all drooling over the upcoming possibilities, I thought I’d take a minute to share a cool new preview of the component and some useful new features!

As you can see, the TreeMap is sitting side by side with Flex’s standard Tree component. Both components are connected to the same data source. Any form of data that you can display in a Tree, you can display in a TreeMap. In fact, just like the Tree, it supports custom data descriptors to allow you to use all sorts of interesting data structures.

<mx:Tree id="tree" width="100%" height="100%"
	selectable="false"
	dataProvider="{sampleData}"
	labelField="@name"/>

<zeus:TreeMap id="map" width="100%" height="100%"
	styleName="TopLevel"
	dataProvider="{sampleData}"
	labelField="@name"
	weightFunction="{getItemWeight}"/>

In the MXML code snippet above, you can see the declarations for the two components. They’re pretty similar. Both are bound to the same data provider. Both use the “name” XML attribute for the labelField. The TreeMap component also has a weightFunction (which works like the labelFunction used by many Flex components) that is bound to a method that calculates the weight or size of nodes in the component.

During development, I kept one thought in the back of my mind: “Customization is key.” You can set fields or functions to determine renderer labels, colors, weights, and tooltips. Of course, the component’s appearance may be customized with Flex’s style system. You can see that I set a style name on the TreeMap above to allow it to be styled a bit differently than the enclosed TreeMaps. The headers have styles much like Accordion headers, and the node renderers have styles a lot like Buttons. You can even create custom renderer classes to add new functionality to the nodes. Imagine placing simple bar charts inside the nodes to show changes over time, or perhaps control bars on each internal TreeMap with components that alter the node colors or other properties.

Click on one of the headers if you haven’t already. Users may zoom enclosed treemaps up to the top level for a more detailed view. This can be useful for complex visualizations where labels might be difficult to read. If you click on the header again, it will zoom out one level, and you can continue all of the way to the top. It’s not implemented yet, but I hope to add transitions to zoom operations to make them more Flashy and user-friendly.

That’s it for now. Hopefully, once I’m settled into my new apartment, I’ll be able to get the first official release out the door. I intend to keep a public source control repository so that everyone can check out the latest and greatest code. I will also package up important milestones and make them available for download. Stay tuned for more!