search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.71k stars 1.83k forks source link

[sankey] color links with gradients #3261

Open OliBravo opened 5 years ago

OliBravo commented 5 years ago

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

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 commented 5 years ago

This feature should be rolled in at the same time as we close https://github.com/plotly/plotly.js/issues/3318 .

screenshot_2019-01-23_12-04-53

alexcjohnson commented 5 years ago

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 commented 4 years ago

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

mattsiler commented 4 years ago

I'm also interested in this feature.

Jedevold commented 3 years ago

Was this ever implemented?

migupry commented 1 year ago

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 commented 1 year ago

@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 commented 12 months ago

@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?