Drawing Radial Diagrams
About the radial graph drawing style and how to tailor it for different use cases
A radial graph drawing algorithm arranges the nodes (or vertices) of a graph on concentric circles, as shown in the example below. This layout style is well suited for applications visualizing directed graphs and tree-like structures.
How Does Radial Graph Layout Work?
The radial graph layout is related to the layered graph layout but visualizes the layers as circles instead of horizontal lines. Hence, in radial layouts, the circles are often called layers where the innermost circle is the first layer.
The layout calculation starts by conceptually reducing the input graph to a tree structure and takes the tree’s root as the center of all circles. Then, the algorithm places each child node in this tree structure on the next outer circle within the sector of the circle that was occupied by its parent node. All initially ignored edges are re-established, and the radii of the circles are calculated, taking the sector sizes needed by each whole subtree into account.
The Radial Layout of the yFiles Library
yFiles is a commercial programming library designed explicitly for diagram visualization. The advanced layout algorithms of yFiles can comfortably transform the data in a readable, pleasing, and informative network. yFiles provides a sophisticated implementation of the radial graph layout algorithm that supports both trees and general graphs. In addition to basic features like specifying the minimum distance between elements, the implementation provides the following advanced features.
Choosing the Center Nodes
The choice of nodes placed in the center, i.e., on the innermost layer, has a deep impact on the resulting drawing. Since this layout style emphasizes these nodes, it makes sense to place the most important node(s), like the root of a tree, into the center. Hence, besides choosing the center nodes utilizing structural policies like centrality measures or edge direction, it is also possible to manually specify these nodes.
Different Layering Strategies
The algorithm provides different strategies for assigning nodes to the layers/circles.
-
BFS: This strategy uses a breadth-first search (BFS) for the layer assignment. In the resulting drawing, all edges span at most one layer. Edges between nodes that belong to the same layer are possible.
-
Hierarchical: The source of an edge is placed on a circle closer to the center as the edge’s target, i.e., on a smaller layer. The layer assignment minimizes the overall edge lengths, where the length of an edge is the difference between the target layer and the source layer.
Bundled Edge Style
The algorithm supports edge bundling of non-tree edges to bundle their paths so that they follow similar routes. Using edge bundling significantly reduces the visual clutter in drawings of large graphs with many non-tree edges. Also, high-level patterns of edge routes and relations between different groups of nodes can be highlighted and easily recognized.
Example Application
The following example application showcases the Radial Layout and its most relevant available settings: Radial Layout Example.
yFiles comes with much more sophisticated and highly customizable graph layout algorithms.