The following examples show the capabilities of our bundleview implementation:
Hovering over a node highlights it. All ancestors and descendants are highlighted as well. In addition, the visualisations shows all nodes related to a leaf of the highlighted node. Source are green, targets are red. Unrelated nodes and relations are faded out to emphasize the selection.
Right clicking a node permanently highlights it, allowing to examine related nodes closely. Another right click on the same node removes the permanent highlight.
Left click a node to focus it. Click the outermost ring to go one step up in the hierarchy.
Use the selection items under the bundleview to manipulate its appearance:
The Size Metric manipulates the radial width of each leaf node. The default selection renders all leafs at the same size.
The default Color Metric renders all leafs using the same color. Changing this selection to a metric with a continuous scale renders the leaf nodes in different shades of the same color, with brighter colors representing higher values. In this case parent nodes are colored by the weighted average of their children. The size metric determines the relative weight of each node, with bigger nodes being more influential. If the chosen metric has an ordinal scale (meaning categorical values) instead, only leaf nodes are rendered by assigning a color for each value. Note, that multiple categories might have the same color value, if the numer of categories exceeds a certain limit.
The following bundleview displays a randomly generated data set. While not delivering much insights, it suites its role as a variable performance benchmark.
The data of the flare visualization library is one of d3's most canonical benchmarks. As such, we obviously want to display it, too.
Relations display imports: The class of interest imports all connected red nodes and is imported by all connected green nodes.