Interactive Filtering of Large Diagrams
Interactive filtering techniques break down large diagrams into relevant and concise parts
Bigger diagrams often suffer from higher complexity, which generally makes them hard to grasp. When dealing with big datasets, most of the time, only a small part of the diagram is of interest. Filtering is an excellent tool for browsing bigger diagrams. It reduces the diagram to the relevant elements and removes unnecessary visual clutter. Combined with interactively collapsible and expandable elements, it makes for an important companion when dealing with large graphs.
A typical use case is to filter a diagram for some aspects of interest. A more sophisticated application of filtering is a drill-down approach, where users start exploring a dataset from specific starting points and only consider the local neighborhood to explore further.
Implementing such an application from scratch is challenging and time-consuming. yFiles, a commercial diagramming library, has built-in support for filtered views that allow creating any use case-specific application and user interaction with little effort.
Filter Diagrams for Specific Elements
Filtering, in general, reduces a given dataset to elements that match a specific query or property. It is often used in combination with a search function that filters the elements in the diagram and removes unrelated items.
Besides filtering the data, it is also applicable on a structural level, where users can hide elements that do not connect to a particular selected entity. This application emphasizes on the connectivity or specific routes that traverse an entity:
Try the sample of the above video in the Transitivity Sample Application that is part of yFiles for HTML
Explore a Diagram by Expanding Elements
A more sophisticated application of filtering is the drill-down approach. This powerful technique can be applied to navigate massive datasets. Starting from specific entities, the user can explore the data step-by-step by expanding an element for its connected neighbors. The video below shows a simple example of such a drill-down approach to navigate through a tree structure.
Explore this drill-down use case in the Collapsible Tree Sample Application that comes with yFiles on all platforms.
Smart Filtering Techniques for Large Diagrams
A common problem when reducing large graphs or networks by filtering techniques is that users do not exactly know what they are looking for and, thus, require tools that assist them in identifying the critical elements.
Centrality Algorithms
A particular class of algorithms called centrality algorithms, help to address this issue by analyzing structural graph properties to reveal such elements. Well-known representatives are the Page-Rank, Betweenness Centrality, Degree Centrality and Closeness Centrality algorithm. Applying, for example, the Betweenness Centrality algorithm, a node’s importance increases with the number of shortest paths (between each pair of nodes in the graph) passing through it. Exploring a graph starting from the automatically detected most important elements is usually the right choice, especially for unknown graph structures, and helps to gain insights quickly and easily.
Community Detection Algorithms
Besides centrality algorithms, so-called community detection algorithms like the Louvain Modularity and Label Propagation algorithm help to identify related sets of elements. The resulting clustering structure provides another means for interactively exploring such graphs.
Choosing Suitable Centrality and Community Detection Algorithms
Choosing the right combination of centrality and community detection algorithms to obtain the best insights into a graph structure can be quite challenging and requires a deeper understanding of the various available methods. Hence, besides providing implementations of these algorithms, the yFiles library also contains a novel approach called NodeAggregation that automatically reduces the graph size by applying suitable centrality and community detection algorithms. This choice of algorithms depends on the specific graph properties and is subject to user-specified constraints like the desired minimum/maximum number of nodes in a community/cluster. The result is an aggregated graph structure with the identified most important nodes at the top level. As shown in the video below, this structure utilizes an (interactive) visualization of the critical parts of large graphs and networks.
Try the sample of the above video in the Large Graph Aggregation Sample Application that is part of yFiles for HTML
Example and Source Code
The source code of the Transitivity Sample Application is available on the yWorks GitHub repository and part of the yFiles for HTML package.
The source code of the Large Graph Aggregation Sample Application is available on the yWorks GitHub repository and part of the yFiles for HTML package.
The source code of the Collapsible Tree Sample Application is part of all yFiles packages and available on the yWorks GitHub repository: