Author Topic: How to get exactly horizontal/vertical Sankey arrows  (Read 11091 times)

Offline pbeilschmidt

  • Administrator
  • Hero Member
  • *****
  • Posts: 500
  • e!Sankey - show the flow.
    • Umberto - know the flow.
How to get exactly horizontal/vertical Sankey arrows
« on: January 05, 2012, 05:36 PM »
Many users feel that it is difficult to make the Sankey arrows in a diagram exactly horizontal or vertical, and that they don't manage to keep their Sankey diagrams neat and clear.

I think it is of general interest to understand how these graphical things work in Sankey diagrams, so I will try to clarify some issues relating to "straight lines" and give some hints for getting there.

First, it is important to know that the Sankey arrows in e!Sankey always hook to a process edge in the middle of the process node. They can leave the process connected to either side, but they will always be centered to the process node edge. And since the Sankey arrows may have any width (depending on the quantity represented as flow on the arrow), we have to use the center line of the arrow to snap it to the process.

Here is what I am talking about (I have selected the three elements, so that you can see the marker points and the center line of the arrow, only visible when the arrow is clicked):



Okay, so when you set the processes in the default size neatly on one horizontal level, or in one vertical line (maybe using the 'Snap to Grid' feature) there should be no problem. All flows will be straight and exactly aligned horizontally or vertically.

Well, now let's look a little further into resizing of processes. If you start changing the process size, the center line of the connected arrows stays connected to the center of the process node. And consequently the arrow isn't staight any more.

In the below image I have a perfectly straight arrow between to processes on the left, and an arrow that is not exactly vertical on the right. Note how I made the top process node a little wider to artificially create this effect. Additionally I have added two simple helper lines to show where the center point of each of the process node is.



So, please remember: When changing the size of processes that are connected by an arrow you will get this effect, unless you change the size of both processes (source and destination), or make a process wider symmetrically to both sides (e.g. left side 2 px to the left, right side 2 px to the right, so that the center of the process node stays at the same position).

The second issue that influences straight lines are stacked Sankey arrows. Have a look at the next image where the two processes are well aligned and the flow from the top process to the bottom process is, let's say, 100 units. Now, to make things more complicated, we get a flow of, say, 33 units from the other processes ("Process 2") merging into the flow.



Allright: So we have the center line of the Sankey arrow where it leaves the process at the top at 50 (half of 100 px), and we have the center line of the stacked (joint) arrow head at 66.5 px (half of 100 px +33 px) where it reaches the process node ("Process 1") at the bottom. Well that is an offset of 16.5 px and impossible to draw as a straight line! I have added a "plumb line" so that you can see this offset.

How to resolve this? Well, I just changed the width of process at the bottom  ("Process 1") so that the center line of the arrow is exactly in line with the plumb line. You may note that the center line of the joint arrow head (i.e. the tip of the arrow) is exactly connecting where the grey marker signals the center of the process top edge, while the red points indicating the two center line of the individual arrows have an offset.



You might also want to experiment with the new feature "Adapt Process Size" in the context menu of the process that allows to set the size exactly to the width or height of the connected arrow. It might be helpful in some cases too.

So, to sum it up: if you are changing process sizes or if you have arrows that merge into a joint arrow head, the lines are mostly not exactly horizontally or vertically any more. To make them straight again some retouching is required. In most cases a simple change of the process size (also for hidden/invisible processes) should do the job.

Hope that lengthy post die help you to get more insight into the world of exactly horizontal/vertical Sankey arrows.

« Last Edit: January 05, 2012, 05:42 PM by pbeilschmidt »
Peter Müller-Beilschmidt
e!Sankey Forum Moderator
ifu Hamburg GmbH