Interactive Sankey Diagram Visualization

Sankey diagrams are a particular type of flow diagrams in which the thickness of each edge (link) is proportional to the flow quantity that passes through it. They have many applications in science, particularly in physics and thermodynamics, where they show how energy, water, electricity, material, etc. flows within a network, but also in fields like finance where a flow of money has to be visualized.

As mentioned above, Sankey diagrams visualize the flow within the nodes (vertices) of a network. To generate a Sankey diagram, you just have to provide information about the connections between the nodes (i.e., the edges of the Sankey diagram) along with a numerical value associated with them that will determine the thickness of each edge.

In Sankey diagrams, the nodes are usually placed into two or more columns connected by horizontal edges. The size of each node is proportional to the total thickness of the attached edges so that it becomes large enough to accommodate all of them.

Nodes and edges often have different colors, which makes it easier to follow their flow.

There exist several tools that can automatically generate Sankey diagrams. Most of them are easy-to-use applications, not requiring any programming skills.

As ready-to-use tools, their disadvantage is that they only support the standard features of a Sankey diagram, e.g., thickness adjustment, color adjustment for nodes and edges, and limited node arrangements that cannot be further extended.

However, there are many use case scenarios where users have advanced requirements that these standard tools cannot meet, e.g., specific constraints on node arrangements, non-trivial node or edge styles, etc.

There are also cases where users already have an application in which they want to integrate a Sankey diagram. For these cases, users have to implement their own Sankey diagram tailored to their specific applications and needs.

Using a software library that provides ready-to-use components for this task helps developers save a lot of money, time, and workload.

yFiles is a commercial programming library designed explicitly for diagram visualization and is a perfect fit for the creation of Sankey diagrams.

yFiles provides a very sophisticated implementation of a layered graph layout algorithm that supports a large number of advanced features.

It is well suited for small and large graphs and can be easily configured for drawing Sankey diagrams.

yFiles also offers an extensive set of predefined styles for visualizing the graph elements, i.e., the nodes, the edges, or the labels, while it also supports the creation of user-defined custom styles.

Take a look at some Sankey diagrams created with yFiles:

It is easy to benefit from the extensive interaction capabilities of the library. Allowing you to create dynamic applications that provide much more functionality than a simple static representation.

With yFiles, a broad set of interactive features can augment the visualization, e.g., filtering that reduces the number of displayed entities, data exploration, and interactive modification by mouse, keyboard and touch gestures, etc.

With yFiles, Sankey diagrams can be created on all supported platforms. yFiles for HTML and yFiles for Java come with an Interactive Sankey Diagram Application which shows the voters’ migration flow between different political parties over the course of three elections.

The source code of the Interactive Sankey Diagram Application is part of these yFiles packages and available on the yWorks GitHub repository:

yFiles for HTML also comes with a Marvel Cinematic Universe Application based on Sankey diagrams, which depicts the relationships between Marvel superheroes and the movies in which they appear.

The thickness of the edges represents the relative screen-time of Marvel characters within each movie.

Test the yFiles diagramming library with a fully functional trial package. To implement your own Sankey diagram application, start with the Interactive Sankey Diagram Application that is part of the yFiles package.

It’s not only a demo but also provides best-practice source code that you can re-use in your projects.

yFiles makes it easy to customize all aspects of this application, for example, restrict user interaction or adjust the style of the elements.

Features like the Sankey edge visualizations and the specialized automatic layout are separate components that work in any yFiles-based project.

In conclusion, a Sankey diagram serves as an invaluable tool for visualizing flow data within networks, offering insights into complex systems across various fields such as physics, finance, environmental science, and engineering.

While basic tools provide some functionality for creating a Sankey diagram, they often lack the advanced features and customization options required for complex visualizations.

Enter yFiles, a powerful diagramming library explicitly designed for creating sophisticated Sankey diagrams. With yFiles, you can leverage advanced features, customization options, and interactive capabilities to visualize flow data with unparalleled precision and clarity.

Whether it’s adjusting edge thickness, color-coding nodes, or exploring dynamic interactive applications, yFiles empowers you to significantly elevate your Sankey diagram creation!