color links with gradients in Sankey plots

[OliBravo]

Hi,
I was looking for adding gradient to sankey links. I would like to reproduce a diagram like this:

I'm highly interested in such an option for R, because I'm a developer of Shiny apps. At the moment, it would be sufficient for me to know a workaround solution, for example custom JS code I could use to add gradients after a sankey diagram is already rendered.

[antoinerg]

This feature should be rolled in at the same time as we close #3318 .

[alexcjohnson]

It looks like in your example @OliBravo the gradient specifically fades between the two node colors (plus some opacity). That's a nice effect - not as the default, but perhaps we can have that as an explicit option somewhere, rather than forcing you to explicitly specify both end colors for each link - although explicit colors everywhere should also be supported.

[aesharpe]

Hi! Has this feature been added yet? I'd also like to include a gradient feature in my sankey

[mattsiler]

I'm also interested in this feature.

[Jedevold]

Was this ever implemented?

[migupry]

I've found multiple examples of color links with gradients implementation using d3Sankey:
https://stackoverflow.com/a/21208382
https://bl.ocks.org/micahstubbs/3c0cb0c0de021e0d9653032784c035e9
https://observablehq.com/@d3/sankey

Could someone give me some general insights on how to implement such functionality on a working plotly.js sankey diagram? Or is it easier to simply go directly to d3Sankey and avoid the hassle?

[alexcjohnson]

@migupry note that plotly.js uses a fork of d3-sankey: https://github.com/plotly/d3-sankey - mainly this was done to switch how we draw links: d3-sankey draws a path from source to target, using stroke-width and stroke-color to set its size and color. Our fork draws the full link outline and uses fill-color. This allows us to avoid overlaps when several links travel in parallel, and lets us outline the links. But as a result we would need to re-implement gradient link colors. There would be two steps to getting this into plotly.js: (1) add the capability to https://github.com/plotly/d3-sankey - probably following the general pattern of how this was done in the original, but applying it to fill instead of stroke; if the only gradient allowed by the original is 'source-target', that seems like the main thing people are interested in but if we can do something more general and allow each link to specify its own gradient that would be even better. (2) expose this capability inside plotly.js

[gregorywaynepower]

@alexcjohnson I appreciate the explanation, I'd also like to take up the mantle on trying to fix this issue since this is something that I've had an issue with as well.

@antoinerg If there's any way you could look way back in time and tell me some of the roadblocks you ran into?