Displaying attractive diagrams: quick hints for choosing a graph layout algorithm from Dojo Diagrammer
Dojo Diagrammer, the new visualization component included in IBM ILOG JViews Enterprise 8.8, allows applications to display and edit graphs (diagrams) and provides a comprehensive set of graph layout algorithms for the automatic placement of the nodes and/or to ensure the links have optimal shapes.
Now, we may wonder: with automatic arrangement of diagrams, humans, that is developers or end-users, have no role to play anymore? Well, there is still place for humans taking decisions... The following decisions are in the hands of the developer (if appropriate, the developer can offer these choices to the end-user thanks to configuration GUI):
The present post focuses on the first point: how to choose the graph layout algorithm that fits better. In some cases, this choice is quite straight-forward, in other cases it is a bit trickier, and to guide your choice you can find below a short synthesis of information present at various places in the documentation of Dojo Diagrammer, enriched with additional hints.
This algorithm organizes the nodes in horizontal or vertical levels, in such away that the majority of the links flow uniformly in the same direction. Typical examples:
algorithm is the obvious choice for representing hierarchies, that is
The obvious choice for representing trees (such as organization charts),where each node has one single ancestor. Typical examples:
The Tree layout can also be used if the graph is not a (pure) tree, however in this case it only takes care of the shape of part of the links, those that contribute to the pure tree part of the graph, the so-called "spanning tree" of the graph.
Your graph does not represent a hierarchy, is not a tree and the orientation of links does not matter? Then Force-Directed layout is likely to fit. An example: This algorithm is slower than Hierarchical or Tree layouts, therefore it is not recommended for very large graphs.
The Circular Layout is mostly designed for Telecom applications where nodes are partitioned into clusters. The clusters are displayed as rings or stars and positioned in a radial tree-like fashion. An example:
In most Telecom applications, the nodes represent network devices that have predefined cluster ids. Hence, the layout algorithm allows specifying the clusters as input data. For cases when no cluster ids are available, the layout algorithm is also able to automatically calculate appropriate clusters from the graph topology.
Obvious choice when your graph has no links, or you want nodes to be placed on a grid or matrix while ignoring the links. An example:
Short and Long link layout
are pure link layouts, that is they do not move the nodes, they
only reshape the links in such a way that crossings and overlaps are
reduced or avoided. But why two different algorithms, Short link layout and
Long link layout?The answer is that they have different (mostly
That said, it is also useful to be aware of some characteristics of each,which help making the choice. In very brief, the names "Short Link layout" and "Long Link layout" refer to the fact that the first one fits better when most links are "short", that is they interconnect relatively close nodes, without too many other nodes placed as obstacles that would need to be avoided by the path of the link. It is the converse for"Long Link layout": it usually fits better when links connect distant nodes with many obstacles in-between.
A more in-depth comparison follows:
Short link layout
Long link layout
The two screenshots above hold for the same graph data. At a quick look, the results of the two link layouts are relatively equivalent, but at a closer look, they differ in terms of link-link crossings, link-node overlaps, symmetry of connection points with respect to the node box, number of link bends (how many turns). Each of these two link layout algorithms is useful in various use-cases and for various application requirements.
All layout algorithms can be applied to nested graphs, that is graphs with nodes that contain another graph. Most often, the best results for such graphs are obtained using the Hierarchical layout.
For the Business Process applications, Dojo Diagrammer also provides support for a special case of nested graphs, called swimlanes. An example:
Finally, all layout algorithms are provided with many configuration parameters to cover a wide range of needs. As a quick guidance, a future publication will provide hints about the parameters that matter the most and their impact on performance, in particular for the deployment on mobile devices. Stay tuned...
Dojo Diagrammer offers many other features, be sure to check the samples that come with Dojo Diagrammer. There is also an online version of the samples here, which includes the live versions of the following graph layout samples: Graph Layout Browser, Organization Chart, Business Process Diagram, Graph Layout Explorer, Client-side Graph Layout for Mobile, and Server-side Graph Layout for Mobile.