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.
yFiles, a commercial diagramming library, has built-in support for filtered views that allow creating any use case-specific application and user interaction.
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
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.
Explore this drill-down use case in the Collapsible Tree Sample Application that comes with yFiles on all platforms.
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 Collapsible Tree Sample Application is part of all yFiles packages and available on the yWorks Github repository: