Metaball Visualization in Diagrams
Learn how metaball visualizations add contextual information to a diagram
A metaball visualization visually groups diagram elements without changing the actual graph structure. In contrast to regular container (or group) elements, it allows nodes to belong to multiple metaball groups.
The additional metaball visualization layer may convey more than just the togetherness of the elements. It can also be used to show contextual information in a heat map like rendering. For example, contamination levels on maps or workload on hubs in networks are typical use cases for heat maps in diagrams.
In general, such kind of visualization can be created most efficiently with WebGL fragment shaders. The area around each node is modeled with a signed distance field, which represents the distance to the closest area. The shader then turns this distance field into the metaball visualization with a given cut-off around the node areas to allow them to blend into each other.
yFiles for HTML is a commercial programming library explicitly designed for diagram visualization. One of its many customization possibilities is to add arbitrary visuals, for example, in the background.
These visuals can either be entirely independent of the diagram or tightly coupled with diagram items. The library facilitates the easy creation of metaball or heat map visualizations and supports multiple rendering technologies, i.e., SVG, WebGL, and HTML5 canvas.
The library allows adding a WebGL visual that renders a fluid-like blob around nodes under consideration of neighboring elements to visualize metaballs. Alternatively, an SVG based filter approach can be used to create a heat map-like appearance.
With yFiles, metaball visualizations can be realized on all supported platforms. yFiles for HTML comes with a Metaball Rendering Sample Application. This example shows how to render metaball-like background visualizations.
The source code of the Metaball Rendering Sample Application is available on the yWorks Github repository and part of the yFiles for HTML package.
Test the yFiles for HTML diagramming library with a 60-day, fully functional trial package. To create metaball visualization in your own project, start with the Metaball Rendering Sample Application that is part of the yFiles for HTML package. It’s not only a showcase application but also provides best-practice source code of the visualization that you can re-use in your own project.
Download the trial version of yFiles for HTML at the yWorks Customer Center.
Navigate to the source directory of the Metaball Rendering Sample Application.
Copy the source code file of the metaball visualization to your own project.
Inspect the main example file to learn how to setup this visualization.