In a previous post I showed the ForceDirected visualization I’m working on for version 1.2 of the JavaScript InfoVis Toolkit, today I’d like to talk about another visualization I’ve been working on, the Sunburst Visualization.
What’s the Sunburst Visualization?
I guess an example could help here:
A Sunburst visualization is a radial space-filling visualization technique for displaying tree like structures. There are other space-filling visualization methods that use other visual encodings for describing hierarchies. For example, the Treemap is a space-filling visualization that uses “containment” to show “parent-child” relationships.
There are a couple of subtle changes that can improve the way the information is communicated by this visualization.
- The “classic” Sunburst visualization uses horizontal labels for node names. One problem with this is that as I mentioned in a previous post labels can be occluded. One solution for this is to rotate labels in a way that they’re not occluded.
-
A simple yet important thing to do when rotating labels is to rotate the labels in a way that they’re always facing up.
In this example some labels are upside-down:
A simple check could make labels more readable:
-
Another interesting thing that can be used with the Canvas Text API is the maxWidth parameter. This is an optional parameter that can be used to try to force the text to fit some width. I use this parameter when plotting the Sunburst visualization:
Node Styling and Behavior
The visualization also implements events for hovering and clicking nodes. You can also provide any number of styles to be smoothly updated when hovering and clicking nodes. There’s also onClick and onHover callbacks that are called when a node is clicked or hovered respectively.
For example, this is the configuration I used in the previous example:
NodeStyles: {
attachToDOM: false,
attachToCanvas: true,
stylesHover: {
'color': '#d33'
},
stylesClick: {
'color': '#3dd'
},
onClick: function(node) {
//build right column relations list
buildRightColumnRelationsList(node);
//hide tip
sb.tips.tip.style.display = 'none';
//rotate
sb.rotate(node, 'animate', {
'duration': 1500,
'transition': Trans.Quart.easeInOut
});
}
},
You can also add tool-tips as I did in the example. The configuration I used was:
Tips: {
allow: true,
attachToDOM: false,
attachToCanvas: true,
onShow: function(tip, node, elem) {
tip.innerHTML = node.name;
}
},
Node styling and tool-tips can be attached to DOM elements (like HTML or SVG labels) or they can also be attached to the Canvas. The latter method uses an internal MouseEventManager to calculate the position of the mouse event and determine which node of the graph is being hovered or clicked.
Collapsing and Expanding Subtrees
I’ve been also implementing animations for collpasing/expanding subtrees:
The collapsing process reduces the angle span occupied by a parent node and sets its children alpha value to zero. There’s also a visual mark set for collapsed nodes.
I hope you like this visualization. There’s still much work to do, mostly regarding browser compatibility. I’ll keep you up to date with the progress of this visualization and the next visualization I’ll be implementing in the next post 
Hello there, I'm Nicolas Garcia Belmonte, a Computer Science Engineer from the Buenos Aires Institute of Technology, in Argentina. I live in France now.
It looks great, nice one!
Thanks!
Hey,
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.
Keep up the excellent work!
@FoaS: I haven’t tested this code, but you could use Graph.Util.eachNode to iterate through all nodes changing their respective label:
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!
Are you planning to add a way for the user to ‘drill-down’ through a deep hirearchy? i.e. to select a new node as the root of the tree? I hope so!
Hi Tim,
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.
Great work!
Thanks
Thanks Nicolas.
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.
Thanks for your detailed explanation.
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/