Color Gradient in Sankey Diagram

Following yesterday’s post on d3.js with Sankey library used to allowing online creation of Sankey diagrams I went to update myself on developments around d3.js/Sankey.

Found this discussion on color gradients in Sankey diagrams at Stackoverflow quite interesting. User Amelia BR has created this example:

AmeliaBR points out that this solution “will only work because the paths are almost straight lines, so a linear gradient will look half-decent — setting a path stroke to a gradient does not make the gradient curve with the path!”.

I remembered that e!Sankey had color gradients too and checked how the software handles this. Here are two different versions I quickly did:

The first one shows the nodes (starting point/destination point of an arrow) and confirmed my guess that the definition of the too/from colors of the gradient must be based on the fill color of the node. In fact you have the option too choose “Gradient from Source” and/or “Gradient to Destination” flags separately.

When dragging the nodes around the arrow colors do show some artifacts and the images refreshes when the action is terminated. I then did an improved version of the diagram by hiding the nodes (left only node B for comparison) and setting a negative undercut at the node. This moves the spear arrow head closer to the foot of the following arrow which gives a nice effect, I think.

Finally, I also learned it is probably wiser to limit oneself to a range of harmonizing colors rather than using too many different colors (as I did).