I’ve just seen the video, it’s nice to see the library is being used for these kind of things

About the RGraph viz… the method in this post might help a lot with your problem:

http://blog.thejit.org/2008/11/02/visualizing-linux-module-dependencies/

If there’s no animation support at all then the visualization has to be redrawn anyway. It appears to snap from one image to another leaving the user disoriented (especially with a treemap). The user needs, at a minimum, some visual clue as to how the old and the new views are related. That clue can be very basic.

So I think the trick for animating complex visualizations that can’t easily be animated directly (e.g., treemap and sunburst) is to reduce the view to include only basic outlines of the key elements, animate those to their new locations, and then redraw the full visualization.

For the treemap zooming _out_ that could mean animating a simple wireframe box from the outer edges of the infovis div to where the corresponding box is in the new treemap.

For a treemap zooming in you could animate a wireframe box to fly from the current position of the node being zoomed into, out to the outer edges of the infovis div.

For a sunburst you could animate a wireframe polygon to fly from the segments that was clicked on in to become the circle at the center (changing shape as it does). Reverse it for zooming out.

p.s. See from 24:10 in this video for an example of your treemap and RGraph classes in action. http://blip.tv/file/2396942 You can see why RGraph wasn’t useful (I’ve removed it now). I’m hoping sunburst will fill that role.

I’m trying to come up with a “smooth transformation” for navigating the tree, but that seems to be kind of hard to do.

I haven’t found a paper describing a smooth animation for doing this (the classic SunBurst paper describes a way to show with more detail some subtrees but it’s not quite the same thing you described).

I know that you asked for something similar for Treemaps a while ago (a smooth animation for navigating the treemap), I’m still considering this and hopefully will come up with some ‘generic’ transformation for this.

Graph.Util.eachNode(rgraph.graph, function(n) {
  var label = rgraph.fx.getLabel(n.id);
  if(label) {
    label.className = 'mynewclassname';
  }
});

You can try that code before changing the clicked node className. If you want to know more about the RGraph the google group for the library is a nice place to ask (or even search for answers) http://groups.google.com/group/javascript-information-visualization-toolkit

@kalahari_kudu

Thanks!

Great library. It’s taken me only 4 hours to digest it as best I have, which isn’t long since I’m very new to the whole web-programming thing.

I have a quick question, however.
Is there a way to change the class of all the labels (on an rChart) during an Onclick?
I’ve already found a way to change the class of the label that you did click (that part was easy) but I want it to revert back to the old class when you click another node.