5

I am trying to plot Sankey diagrams using sankeyNetwork() in networkD3 package. 

sankeyNetwork(Links = Flow_data, Nodes = Nodes_data,
    Source = "Source_ID", Target = "Target",
    Value = "value", NodeID = "Nodes_name",
    width = 1000, height=600, fontsize = 16, nodeWidth = 50,
    colourScale = "d3.scale.category20c()")

The visualization works great but I would like to change the colour range to an individual range. Is there any chance to change the colours of the SankeyNetwork? I need a range of only e.g. 3 colours which I can set by myself (not the predefined colourScales of d3.scale).

CJ Yetman
  • 8,373
  • 2
  • 24
  • 56
AEdiger
  • 51
  • 1
  • 2

1 Answers1

8

You can config:

sankeyNetwork(Links = Flow_data, Nodes = Nodes_data,
                      Source = "Source_ID", Target = "Target",
                      Value = "value", NodeID = "Nodes_name",
                      width = 1000, height=600, fontsize = 16, nodeWidth = 50,
                      colourScale = "d3.scale.category20c()")  <==== Categorical color

UPDATE

Newer version:

d3.scale.ordinal().range(["#7d3945","#e0677b", "#244457"])
now works if changed to:
d3.scaleOrdinal().range(["#7d3945","#e0677b", "#244457"])

Thanks @Peter Ellis

UPDATE

Is there any way to set transparency when using custom colours?

"#AARRGGBB" doesn't seem to work

You can make a selectAll("your_class").style("opacity",0.5), Take a look to this: stackoverflow.com/questions/6042550/… for style attribute options. And CSS3 has a fully standardized solution: "fill="rgba(124,240,10,0.5)"

For color references, look here: http://bl.ocks.org/aaizemberg/78bd3dade9593896a59d

and here: https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors

Community
  • 1
  • 1
Klaujesi
  • 1,816
  • 1
  • 13
  • 17
  • Thank you :) I visited these links already. But with the categorical colours I get 10 or 20 predefined colours. I would prefer to use less colours. Is there a possibility to pick only a few of the categorical colours? – AEdiger Aug 25 '15 at 17:47
  • 3
    According documentation: **colourScale character string specifying the categorical colour scale for the nodes**. You can try this: `"#7d3945","#e0677b", "#244457" ` or `d3.scale.ordinal().range(["#7d3945","#e0677b", "#244457"])` <== personal colors – Klaujesi Aug 26 '15 at 12:03
  • Hi Klaujesi, do you mind taking a look at a related networkD3 question? http://stackoverflow.com/questions/35280218/r-networkd3-package-node-coloring-in-simplenetwork – warship Feb 09 '16 at 01:50
  • Is there any way to set transparency when using custom colours? #AARRGGBB doesn't seem to work – fahmy Oct 28 '16 at 17:57
  • You can make a selectAll("your_class").style("opacity",0.5), Take a look to this: http://stackoverflow.com/questions/6042550/svg-fill-color-transparency-alpha for style attribute options. And CSS3 has a fully standardized solution: "fill="rgba(124,240,10,0.5)" – Klaujesi Oct 29 '16 at 13:33
  • Should this answer still work? Doesn't work for me any more, wondering if something has changed. When I add colourScale = "d3.scale.category20c()" to sankeyNetwork it no longer draws the diagram. – Peter Ellis May 20 '17 at 03:22
  • d3.scale.ordinal().range(["#7d3945","#e0677b", "#244457"]) now works if changed to d3.scaleOrdinal().range(["#7d3945","#e0677b", "#244457"]) – Peter Ellis May 20 '17 at 03:45
  • if change to image? – Eng Soon Cheah Jan 31 '20 at 08:08