Exploring Relations in a Diagram

Emphasize an item and its neighborhood in either the original diagram using highlights, or a separate diagram component

When looking at a diagram of graphs or networks, it is often interesting to see which nodes (the objects, also vertices) are in close relation to each other. These nodes are usually connected by edges (the lines or links).

Small and spare graphs often have only short edges with no or only a few crossings. This makes it easy to spot all nodes connected to one specific node (also called the direct neighborhood of the node). However, for larger and denser, graphs long edges with several crossings make it difficult to visually follow the edges and identify the neighborhood of a node. For this use case, the neighborhood should either be highlighted highlighted or displayed in a separate filtered view filtered view.

Highlighting the Neighborhood

As long as all neighbors are visible on the screen, it is sufficient to highlight all neighbors of a hovered or clicked node:

Unfortunately, this straightforward approach also has some disadvantages:

It doesn’t work for nodes outside of the screen.
The neighborhood nodes may still be quite far away from each other, which makes it hard to consider them together.
The other nodes and edges distract the eye.
The relations between the neighborhood nodes are difficult to grasp.

Adding a Filtered Neighborhood View

A solution solving the problems mentioned above is to use a separate filtered view containing only the node and its neighborhood. Such a view also allows for rearranging these nodes to pack them closer together and show their interrelations:

As this separate view is quite compact, it can even be used to include the neighbors of the neighbors (also called the neighborhood of depth 2) or even more distant relatives.

Example and Source Code

With yFiles, neighborhood views can be realized on all supported platforms. yFiles for HTML comes with a Neighborhood View Sample Application. This example provides some sample graphs and a neighborhood view for the clicked node. The depth of the neighborhood can easily be changed. It can also be restricted to only consider incoming or outgoing edges when collecting the neighborhood nodes.

The source code of the Neighborhood View Sample Application is available on GitHub and part of the yFiles for HTML package.

Add a Neighborhood View to Your Own Application

Test the yFiles neighborhood view with a fully-functional trial package of yFiles for HTML.

To add a neighborhood view to your own application, start with the Neighborhood View Sample Application that is part of the yFiles for HTML package. It’s not only a showcase application but also provides the source code of a neighborhood view component that you can re-use in your own project. This component is designed to work in any yFiles-based project without modifications, but you can also easily customize it to match your requirements.

Download the trial version of yFiles for HTML at the yWorks Customer Center.
Navigate to the source directory of the Neighborhood View Sample Application and copy its neighborhood view component to your project.
See the source code of the main application file for setup instructions.
Optionally, adjust the component to your requirements.

Try yFiles for free

Learn more about yFiles for HTML