Category: Miscellaneous

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]

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 🙂

AS3: Where is my onReleaseOutside

This is the most annoying point I have reached with AS3 yet. AS3 does not have an onReleaseOutside event, something I really needed for a menu to hide if the user clicked away from it. One implementation that I did find here involves a deeper understanding of the event bubbling mechanism. My own implementation is simpler and I just listen to a global application mouse click and see if my menu is down or not. However i do imagine lack of this event would make many developers go nuts. What sucks even more is that event isnt even available on the Flex framework. Maybe something we can ask for in 2.1 ?

and finally….

The try-catch block is possibly one of the least used elements of AS2. Adobe’s page on the try catch block on livedocs is bare bones and pretty much mentions what it does and little else. For the most part, most flash developers are unfamiliar with the concept of error bubbling and you can pretty much get by without it. For example, if you are reading an xml file, and know that it may not exist, you can construct the code like:


var x:XML = new XML();
x.onLoad = function(success:Boolean){
if(success){
// success
}
else{
this.manager.xmlError();
}
}

Here, the manager.xmlError() function deals with the error situation. However in the try catch block way your code would look like:

var x:XML = new XML();
x.onLoad = function(success:Boolean){
if(success){
// success
}
else{
throw new Error("xml load failed")
}
}

By using the throw keyword, you are declaring that that particular class is aware of a failure situation but its upto some other class which is below the class object on the invocation stack to deal with it (Java also has a 'throws' keyword that is used againt the method name to reinforce the fact that the function will throw an error).

So in AS2 land, while errors were 'nice-to-haves', they were by no means mandatory. This situation has since changed in AS3 and flash developers must now be really aware of this programming paradigm. In AS3, the player itself generates errors in certain situations and it is upto your code to deal with these runtime errors.

If try-catch blocks have been the neglected children of AS2, the finally keyword has been the forgotten one. Most of the code that deals with catching errors pretty uses try and catch but hardly ever finally. Code in 'finally' blocks is guaranteed to execute regardless of what happens in the try-catch block. While explaining the concept of finally, one of my collegues asked me the purpose of finally. For example if you have


try{
}
catch(e){

}
finally{
/// statements here
}

how is that different from
try{

}
catch(e){

}
/// statements here


I did not have any immediate answer for that question besides the better-readability of the code. Reading up on the Java implementation and talking to Java developers (most of whom end up not using it too 😉 ), brought out the most important aspect of the finally statement. The part that I hadnt realized was that the finally block is executed even if your try block succeeds and does a return.

In the meanwhile make sure you are upto speed on compiler errors, warnings and runtime errors in Flash.

More notes, Day 2, FF Austin

XD Talk:
Better looking evolution of Mike Chamber’s ApolloTunes, now renamed to Acsension. Neat design for the xd group: XD bold and joined to look like a bomb.

——————————
Browser Power for Flash
1) Loading a valid xhtml file as an xml file. (I think its a better idea than ripple but I need to look more at Ted Patrick’s FXT to compare with that)
2) To ‘hide’ the javascript parts of the HTML document surround the js in comment tags within the script block.

3) idMap[id] in the XML Object in Flash 8 returns the node with the id referenced.

————————–
From the Yahoo AS2 – AS3 migration talk:

1) Do not put code in constructors of classes since they arent JIT-ed.
2) NetConnection you can change objectEncoding to AMF0 or AMF3 to send data in AMF format.
3) The ‘delete’ keyword deletes only dynamic properties and methods.

————————————–
From the FlexBuilder talk:
Eclipse editor shortcuts : Ctrl+Shift+L

————————————–
From Grant Skinners talk on Resource Management in AS3.

AS3 doesnt garbage collect until it starts running out of memory.
Use weak references when adding listeners.
Have explicit dispose functions in your classes.

Next Gen Apps: Really Good or RRRReally Bad !

I installed MAX today, a new app running on the WPF RC1 runtime, mostly cos of the hype I read on a few blogs. Is it great? Well I dont know. Its…different. A lot of things glow. A lot of things have drop shadows. There are some tweens. But is that what I am looking for in an app that manages my photos and my blogs? Its kind of hard for me to say this but I dread the new world of ‘cinematic apps’. Why? Cos its so easy to get them wrong. The biggest complaint against Flash used to be that every Flash site had to be learnt. The newer sites seem to be doing a better job of information architecture but thats come after years of learning from bad apps. And now the desktop is open to similar abuse with application developers flexing their new-found freedom from traditional controls.

WPF’s prize demo is the Northface application that shows users videos overlayed on 3d planes and videos overlayed on video. I am completely blah’ed by it and couldnt care less. Nor do I care about the photos rotating 360 degrees before coming into view. Actually for a desktop app, I cant think of any place I would use 3d anyway. I still want Flash to come up with native 3d but thats cos I would like to make a game or some interesting new UI for a site but I dont think for an app like an rss browser.

Maybe I lack imagination and maybe I am just getting old (26 years !!…shudder). Maybe I will revisit my fears when some new apps come out. I still think MAX is interesting, but I doubt it’ll replace my RSSOwl