Sunburst Visualization

Posted in: javascript infovis toolkit , visualization
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.

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 :)
Comments
blog comments powered by Disqus