color your d3 sankey using rCharts

How To Color Your d3.js Sankey Diagram

in this case with rCharts but relevant even without

In response to this Stack Overflow question Adding Color to Sankey Diagram in rCharts, I put this quick example together to demonstrate one way of handling.

demo

forked from timelyportfolio's block: color your d3 sankey using rCharts

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href='https://timelyportfolio.github.io/rCharts_d3_sankey//css/sankey.css'>
    
    <script src='https://timelyportfolio.github.io/rcharts_d3_sankey//js/d3.v3.js' type='text/javascript'></script>
    <script src='https://timelyportfolio.github.io/rcharts_d3_sankey//js/sankey.js' type='text/javascript'></script>
    
    <style>
    .rChart {
      display: block;
      margin-left: auto; 
      margin-right: auto;
      width: 960px;
      height: 500px;
    }  
    </style>
    
  </head>
  <body >
    
    <div id = 'chart21541f297cdc' class = 'rChart rCharts_d3_sankey'></div>

params.units ? units = " " + params.units : units = "";

//hard code these now but eventually make available
var formatNumber = d3.format("0,.0f"),    // zero decimal places
    format = function(d) { return formatNumber(d) + units; },
    color = d3.scale.category20();

if(params.labelFormat){
  formatNumber = d3.format(".2%");
}

//now get nodes based on links data
//thanks Mike Bostock https://groups.google.com/d/msg/d3-js/pl297cFtIQk/Eso4q_eBu1IJ
//this handy little function returns only the distinct / unique nodes
nodes = d3.keys(d3.nest()
                .key(function (d) { return d.name; })
                .map(nodes));

//it appears d3 with force layout wants a numeric source and target
//so loop through each link replacing the text with its index from node
links.forEach(function (d, i) {
    links[i].source = nodes.indexOf(links[i].source);
    links[i].target = nodes.indexOf(links[i].target);
});

//now loop through each nodes to make nodes an array of objects rather than an array of strings
nodes.forEach(function (d, i) {
    nodes[i] = { "name": d };
});

sankey
  .nodes(nodes)
  .links(links)
  .layout(params.layout);
  
var link = svg.append("g").selectAll(".link")
  .data(links)
.enter().append("path")
  .attr("class", "link")
  .attr("d", path)
  .style("stroke-width", function (d) { return Math.max(1, d.dy); })
  .sort(function (a, b) { return b.dy - a.dy; });

link.append("title")
  .text(function (d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });

node.append("rect")
  .attr("height", function (d) { return d.dy; })
  .attr("width", sankey.nodeWidth())
  .style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); })
  .style("stroke", function (d) { return d3.rgb(d.color).darker(2); })
.append("title")
  .text(function (d) { return d.name + "\n" + format(d.value); });

node.append("text")
  .attr("x", -6)
  .attr("y", function (d) { return d.dy / 2; })
  .attr("dy", ".35em")
  .attr("text-anchor", "end")
  .attr("transform", null)
  .text(function (d) { return d.name; })
.filter(function (d) { return d.x < params.width / 2; })
  .attr("x", 6 + sankey.nodeWidth())
  .attr("text-anchor", "start");

// the function for moving the nodes
  function dragmove(d) {
    d3.select(this).attr("transform", 
        "translate(" + (
                   d.x = Math.max(0, Math.min(params.width - d.dx, d3.event.x))
                ) + "," + (
                   d.y = Math.max(0, Math.min(params.height - d.dy, d3.event.y))
                ) + ")");
        sankey.relayout();
        link.attr("d", path);
  }
})();
</script>
    
    
    <script>
    // to be specific in case you have more than one chart
    d3.selectAll('#chart21541f297cdc svg path.link')
      .style('stroke', function(d){
        //here we will use the source color
        //if you want target then sub target for source
        //or if you want something other than gray
        //supply a constant
        //or use a categorical scale or gradient
        return d.source.color;
      })
     //note no changes were made to opacity
     //to do uncomment below but will affect mouseover
     //so will need to define mouseover and mouseout
     //happy to show how to do this also
     // .style('stroke-opacity', .7) 
    </script>
        
  </body>
</html>

Modified http://timelyportfolio.github.io/rCharts_d3_sankey//js/d3.v3.js to a secure url

Modified http://timelyportfolio.github.io/rCharts_d3_sankey//js/sankey.js to a secure url

https://timelyportfolio.github.io/rCharts_d3_sankey//js/d3.v3.js

https://timelyportfolio.github.io/rCharts_d3_sankey//js/sankey.js