Visually Emphasize Node Depth in Constellation Roamer
At its heart, Constellation Roamer is a tree visualization. Each time a new node is selected, a tree rooted at that node is presented to the user. In these tree visualizations it's nice to give some indication of each node's depth. Some visualizations use concentric rings to explicitly show how far a node is from the root node.
Roamer really only supports indicating depth for two levels: level zero—the selected node—and everything else. The reason for this is that the number of customizable properties would explode if each node was rendered differently depending on its distance from the root node. However, with version 1.2.5 there is another way.
GraphViz with Indication of Node Depth
The demo above uses node size and color to indicate its depth. The bigger and redder the node is, the smaller the distance from the selected node. The depth number is also shown in parentheses in each node's label.
Hit the zoom-to-fit button in the top left corner to get a broader picture.
Implementing Depth-Based Node Styles
Overview
The solution is two part: first, the graph data returned by the REST tree interface needs to return node style properties that depend on the selected node and second, the graph data stored in Roamer needs to be reloaded when the selected node changes.
Updating the REST Tree Data Interface
When printing out the tree of nodes, normally the style customization properties like "graphic_fill_color" are the same across calls. That is, when the node_id parameter changes the values of the style customization properties don't change.
However, since we want to make nodes look different depending on their depth, these customization properties will depend on the node_id parameter. For the example above, the root node in the tree returned by the script gets the following value:
<node ... selected_graphic_fill_color="#ff0000" .. />
Then, the nodes directly connected to it—a depth of 1—look like this:
<node ... graphic_fill_color="#ff6666" ... />
And nodes connected to those—a depth of 2 this time—have white circles:
<node ... graphic_fill_color="#ffffff" ... />
By itself this won't work. That's because Roamer doesn't necessarily make a new call to the server each time a new node is selected. We can force it to do this but we're going to need some Javascript.
Force Graph Data Reload Using Javascript
There are a few extra steps to get your implementation of Roamer working with Javascript. If you haven't done so already, you should check out this Javascript and Roamer Setup tutorial.
Once you've got Javascript ready to go, the change you need to make is simple. All we need to do is force Constellation Roamer to reload the graph data from the server every time the selected node changes. We do this by adding a call to reloadGraphData().
function constellationRoamer_onChange(nodeID)
{
var constellationRoamerElem = getConstellationRoamerElem();
constellationRoamerElem.reloadGraphData();
}
That's it! Now Roamer will reload the data with every node selection change so you can use different values for each node's shape, color, and size depending on its depth.