Level of Detail for Large Diagrams

The question to answer is how to reduce rendering time and improve clarity by leaving out details. Let us view an organization chart as an example:

From the above images, it is evident that if we always display the objects with all details, the text becomes unreadable in smaller zoom levels. Moreover, we waste rendering time for displaying text, which is not readable, anyway.

The solution here is to simplify the visualization with smaller zoom levels, which reduces the rendering time and memory usage per object. Ideally, this compensates for the resource usage of more objects to display at the same time. Simplifying the information has another advantage: reducing the displayed text to only the essential information allows for using a larger font, which yields better readability of the visual information.

The above figure presents the same diagram with the level of detail rendering. Note that the most important information — the surnames — are readable even if the entire diagram is displayed. Also, note that the text rendering is omitted as soon as the short text becomes unreadable.

yFiles is a commercial programming library that provides maximum flexibility for the visualization of diagrams and diagram items.

Run the Organization Chart Sample Application to explore the examples demonstrated here. It is part of yFiles on all platforms. The Organization Chart Sample Application that comes with yFiles for HTML focuses solely on the level of detail rendering.

In addition to simplifying the rendering of the objects, it is also possible to reduce the entire diagram, if necessary. For example, a sub-graph can be replaced by a single node, probably by a node of the appropriate size.

Again, we take an organization chart as an example. Instead of having one entity (or node) per employee, entire departments can be merged into single entities. The resulting objects are large enough to display a readable label with the department name, which contributes to a further clarification since it adds information which was not visible in the level of detail rendering. Also, the size of the nodes loosely corresponds to the department size, adding even more information.

Especially for a diagram organized in clusters, one could replace the nodes of a cluster with a single node.

yFiles provides various methods to filter graphs. The user can try multiple online demo applications to explore the capabilities of yFiles driven applications.

The Hierarchic Grouping Sample Application shows how parts of a hierarchically organized graph can be hidden and shown interactively. The Collapsible Tree Sample Application demonstrates how to hide and show sub-trees of a tree structure. Similarly, the Organization Chart Sample Application also supports showing and hiding parts of the diagram.

With yFiles, level of detail visualization and level of detail filtering can be realized on all supported platforms. yFiles comes with the following sample applications that demonstrate these features:

The source code of these sample applications is part of the yFiles packages and available on the yWorks GitHub repository:

yFiles for HTML also contains a Level of Detail Rendering Sample Application that focuses on the implementation of a level of detail rendering with yFiles and can be used out of the box in any project based on yFiles for HTML.