I've been working on a little experiment the last few evenings and I wanted to share the result with you guys. Here it is:
What you see here is 30 seconds of me browsing Ars Technica on Firefox. Doesn't look familiar ? That's probably because this is a behind-the-scenes video.
Every square represents one method/function/procedure being called by Firefox while browsing the web. When you see it light up you've just witnessed a call. The brightness will then fade, unless it gets called again. In addition the colour gives an indication of the overall number of times the method was called. It starts out reddish, moves past green and blue and ends up at pink (the colours are what they are; I didn't really choose them, or I would not have gone with pink ;).
When you see this through to the end, this is what you get:
This time brightness is an indicator of the overall number of times the method was called. As you can see there are slightly over 3300 methods which were used, and close to one million calls in the thirty seconds timeframe. And as you can tell from the amount of red and relative darkness, most of those didn't have much to contribute (*).
Why go through all this trouble ? Well, I've been wondering how to visualize the static and dynamic structure of software, so that people can get some idea of the complexity behind the tools they use. The above was a very basic look at some of the dynamics while browsing the web. It looks cool (to me :), and you get to see some nice patterns if you slow it down somewhat more than you see in the video. But I think that with some extra presentation of the static structure this could be improved quite a bit.
That, however, is for another day.
(*) This isn't necessarily true. I'm only lighting up the entry of a method, not the exit. It is quite possible that a lot of the lesser used methods were running quite a bit longer than the others. That's another thing I'd like to see handled somehow in the visualisation.
