Sankey - highlight links by doubleclicking nodes

An adaptation of the Sankey diagram to show traceability of project outputs through to benefits. Double clicking on a node shows the links up and down the model.

We adapted the sankey.js file so that node heights weren't determined by the number and size of incoming/outgoing links, and aligned the ends of the links to the middle of the nodes.

Thanks to Simon Titheridge!

<!DOCTYPE html>
<meta charset="utf-8">
<title>Traceability</title>
<link href="sankey_style.css" rel="stylesheet">
<style media="screen" type="text/css">

.sankey-graph {
  height: 1000px;
}

.sankey-graph .node rect {
  shape-rendering: crispEdges;
  pointer-events:all;
  fill: none;
  stroke: rgb(160, 160,160);
  stroke-width: 2px;
}

.sankey-graph .nodeInfo {
  pointer-events:none;
  background-color: white;
  font: 9px;
  font-family: Calibri, sans-serif; 
}

.sankey-graph #foreignObject {
  pointer-events:none;
}

.sankey-graph .node text {
  pointer-events: none;
  text-shadow: 0 1px 0 #fff;
}

.sankey-graph .bar rect {
  stroke: none;
}

.sankey-graph .link {
  fill: none;
  stroke: #000;
  stroke-opacity: .2;
}

.sankey-graph div.nodeInfo {
  text-align: center;
  line-height: 110%;
  vertical-align: middle; 
  display: table-cell; 
}

</style>
<body>

var margin = {top: 1, right: 0, bottom: 6, left: 0},
    width = 1895,  //also change CSS file to change Width
    height = 1030 - margin.top - margin.bottom,
    node_Width = 200;
    node_Stroke = 2;

var formatNumber = d3.format(",.0f"),
    format = function(d) { return formatNumber(d) + " TODO TODO TODO"; },
    color = d3.scale.category20();

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var sankey = d3.sankey()
    .nodeWidth(node_Width)       //Node width
    .nodePadding(8)              //spacing between nodes
    .size([width, height]);

var path = sankey.link();

d3.json("benefits.json", function(graph) {

sankey.nodes(graph.nodes)
      .links(graph.links)
      .layout(101);        //iterations for layout algorithm

var link = svg.append("g").selectAll(".link")
      .data(graph.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; });
      //.on("mouseover", highlightLink)
      //.on("mouseout", unhighlightLink);

node.append("foreignObject")
        .attr("y", 0)
        .attr("height", function(d) { return d.dy; })
        .attr("width", sankey.nodeWidth())
        .attr("transform", null)
      .append("xhtml:div")
        .attr("class", "nodeInfo")
        .html(function(d) {
          var types = d['types'];
          var properName = '';
          var typeNames = '';

var htmlString = d.name;
          return htmlString;
        }) 
        .style("height", function(d) { return d.dy + "px"; })
        .style("width", sankey.nodeWidth() + "px");

//Add node clicking

//Adding color bar for Node TYPE:
  var typeDict = {
    'cdn': '#00778c',
    'analytics': '#ff9b03',
    'security': '#58008c',
    'advertising': '#506da5',
    'api': '#11462c',
    'social': '#ef5f00',
    'tracking': '#58008c',
    'datacenter': '#11462c',
    'hosting': '#a5c1b3',
    'cloud': '#11462c'
  };

node.append("g")
      .attr("class", "bar")
    .call(addTypeBars);

function addTypeBars(sel) {

sel.each(function(d) {

var bars = d3.select(this);
      var types = d.types;

if (types) {

var colorbars = [];
          //Loop through to pull the colors this set of types does have
          for(var j = 0; j < types.length; j++) {
              if (typeDict[types[j]]) {
                  colorbars.push(types[j]);
              }
          }

for (var i = 0; i < colorbars.length; i++) {
              bars.append("rect")
              .attr("x", i * (sankey.nodeWidth()/colorbars.length) + 1)
              .attr("y", 1)
              .attr("height", 2.5) 
              .attr("width", function (d) { 
                if (i == colorbars.length - 1) 
                  return (sankey.nodeWidth()/colorbars.length) - 2;
                else
                  return (sankey.nodeWidth()/colorbars.length);

})
              .style("fill", function(d) { 
                  return typeDict[colorbars[i]]
              });

}
      }

})
  }//end of addTypeBars

node.append("rect")
    .attr("height", function(d) { return d.dy; }) 
    .attr("width", sankey.nodeWidth())
    .on("mouseover", showConnections)
    .on("mouseout", hideConnections);
   
   d3.selectAll(".node").on("click", handleNodeClick);

function hideConnections(d) {
      //This unhighlights the node
      d3.select(this).style("stroke",rgbToHex(160, 160,160))
          .style("stroke-opacity", 0.6);
      link.style("stroke-opacity", 0.2);
  }

function highlightLink(d) {
      //changes styling on selected link
      d3.select(this).style("stroke","red")
          .style("stroke-opacity", 0.6);
  }

function unhighlightLink(d) {
      //changes styling on selected link
      d3.select(this).style("stroke","black")
          .style("stroke-opacity", 0.2);
  }

function toTitleCase(str) {
      return str.replace(/\w\S*/g, function(txt){
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
      });
  }

function rgbToHex(r, g, b) {
    var rgb = b | (g << 8) | (r << 16);
    return (0x1000000 | rgb).toString(16).substring(1);
  }

//Recursive highlighting of nodes
  //---------------------------
  
	var leftDelay;
	var rightDelay;
	var delayIncrement
	var durationTime;
	
	delayIncrement = 75;
	durationTime = 400; //millisecs
  
	function handleNodeClick(d) {
    
    console.log(delayIncrement)
	
	leftDelay = 0;
	rightDelay = 0;
	
	//Reset colour of nodes to black	
	d3.selectAll(".node")
		.transition()
		.duration(250)
		.style("color","black");
	
	d3.selectAll(".link")
		.transition()
		.duration(250)
		.style("stroke","black");
	
	//Highlight clicked node	
	d3.selectAll(".node").filter(function(d2,i) {	
		return d.name == d2.name;
	})
	.style("color","green")

iterateLinkedLinksRight(d); //Recurse source direction
	iterateLinkedLinksLeft(d); //Recurse target direction
  }
  function iterateLinkedLinksRight(pStartNode) {

rightDelay = rightDelay + delayIncrement;
  
	//Select links that have a given source name
	d3.selectAll("path.link").filter(function(pLinkedLink,i) {
		return pLinkedLink.source.name == pStartNode.name;
	})
	.transition()
	.duration(durationTime)
	.delay(rightDelay)
	.style("stroke","red")
	.style("stroke-opacity", 0.6)
	.each(iterateLinkedNodesRight);
  }
  function iterateLinkedNodesRight(pStartLink) {
	//Select nodes that have a given source name
	d3.selectAll(".node").filter(function(pLinkedNode,i) {	
		return pLinkedNode.name == pStartLink.target.name;
	})
	.transition()
	.duration(durationTime)
	.delay(rightDelay)
	.style("color","red")
	.each(iterateLinkedLinksRight);
	
	rightDelay = 0;
  }

function iterateLinkedLinksLeft(pStartNode) {

leftDelay = leftDelay + delayIncrement;
	
	//Select links that have a given source name
	d3.selectAll("path.link").filter(function(pLinkedLink,i) {
		return pLinkedLink.target.name == pStartNode.name;
	})
	.transition()
	.duration(durationTime)
	.delay(leftDelay)
	.style("stroke","red")
	.style("stroke-opacity", 0.6)
	.each(iterateLinkedNodesLeft);
  }
  function iterateLinkedNodesLeft(pStartLink) {

//Select nodes that have a given source name
	d3.selectAll(".node").filter(function(pLinkedNode,i) {	
		return pLinkedNode.name == pStartLink.source.name;
	})
	.transition()
	.duration(durationTime)
	.delay(leftDelay)
	.style("color","red")
	.each(iterateLinkedLinksLeft);
	
	leftDelay = 0;
  }
  
    function dragmove(d) {
    d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
    sankey.relayout();
    link.attr("d", path);
  }

//---------------------------
});

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js