Update sankey-diagram.md (#2291)

* Update sankey-diagram.md Add colorful links to the Sankey diagram. * Apply suggestions from code review More complex Sankey diagram with colored links - setting the link color in one line, add the comment why 'magenta' is changed to its rgba value. Co-Authored-By: Emmanuelle Gouillart <[email protected]> * Change paragraph title to 'More complex Sankey diagram with colored links' Co-authored-by: Emmanuelle Gouillart <[email protected]>
plotly · Mar 27, 2020 · bd9d849 · bd9d849
1 parent 1947798
commit bd9d849
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/doc/python/sankey-diagram.md b/doc/python/sankey-diagram.md
@@ -62,15 +62,23 @@ fig.update_layout(title_text="Basic Sankey Diagram", font_size=10)
 fig.show()
 ```
 
-### More complex Sankey diagram
+### More complex Sankey diagram with colored links
 
-```python inputHidden=false outputHidden=false
+```python
 import plotly.graph_objects as go
 import urllib, json
 
 url = 'https://raw.githubusercontent.com/plotly/plotly.js/master/test/image/mocks/sankey_energy.json'
 response = urllib.request.urlopen(url)
 data = json.loads(response.read())
+
+# override gray link colors with 'source' colors
+opacity = 0.4
+# change 'magenta' to its 'rgba' value to add opacity
+data['data'][0]['node']['color'] = ['rgba(255,0,255, 0.8)' if color == "magenta" else color for color in data['data'][0]['node']['color']]
+data['data'][0]['link']['color'] = [data['data'][0]['node']['color'][src].replace("0.8", str(opacity))
+                                    for src in data['data'][0]['link']['source']]
+
 fig = go.Figure(data=[go.Sankey(
     valueformat = ".0f",
     valuesuffix = "TWh",
@@ -87,8 +95,9 @@ fig = go.Figure(data=[go.Sankey(
       source =  data['data'][0]['link']['source'],
       target =  data['data'][0]['link']['target'],
       value =  data['data'][0]['link']['value'],
-      label =  data['data'][0]['link']['label']
-  ))])
+      label =  data['data'][0]['link']['label'],
+      color =  data['data'][0]['link']['color']
+))])
 
 fig.update_layout(title_text="Energy forecast for 2050<br>Source: Department of Energy & Climate Change, Tom Counsell via <a href='https://bost.ocks.org/mike/sankey/'>Mike Bostock</a>",
                   font_size=10)