Sankey chart with links sorted by category

Sankey chart with the sankey.js amended to sort the links alphabetically by d.category. An improvement will be to sort by d.category and then by its source/target node.

forked from tomshanley's block: Sankey chart with links sorted by category

forked from nigelramdial's block: Sankey chart with links sorted by category

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Channel Shift</title>
<style>

body {
font-family: "Cambria", serif;
}

#chart {
  height: 500px;
}

.node rect {
  cursor: move;
  fill-opacity: .9;
  shape-rendering: crispEdges;
}

.node text {
  pointer-events: none;
  text-shadow: 0 1px 0 #fff;
  font-family: "Cambria", serif;
}

.link-confirmation {
  fill: none;
  stroke-opacity: .5;
}

.link-confirmation {
  fill: none;
  stroke: red;
  stroke-opacity: .5;
}

.link-interaction {
  fill: none;
  stroke: green;
  stroke-opacity: .5;
}

.link-transaction {
  fill: none;
  stroke: blue;
  stroke-opacity: .5;
}

.link-information {
  fill: none;
  stroke: orange;
  stroke-opacity: .5;
}

.link-information:hover {
  stroke-opacity: .7;
}

.link-transaction:hover {
  stroke-opacity: .7;
}

.link-interaction:hover {
  stroke-opacity: .7;
}

.link-confirmation:hover {
  stroke-opacity: .7;
}

table
{
border-spacing:5px;
}

</style>
<body>

<table style="width:300px">
<tr>
  <td style="background-color:red">Confirmation</td>
  <td style="background-color:orange">Information</td> 
  <td style="background-color:green">Interaction</td>
  <td style="background-color:blue">Transaction</td>
</tr>
</table>

var margin = {top: 1, right: 1, bottom: 6, left: 1},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var formatNumber = d3.format(",.0f"),
    color = d3.scale.category20();
	
var typesColour = d3.scale.ordinal()
    .domain(["interaction", "information", "confirmation", "transaction"])
    //.range(colorbrewer.BuGn[4])
	.range(["red","yellow","blue","purple"])
	;

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(30)
    .nodePadding(30)
	.layout(1)
    .size([width, height]);

var path = sankey.link();

d3.json("channel-shift.json", function(energy) {

sankey
      .nodes(energy.nodes)
      .links(energy.links)
      .layout(32);

link.append("title")
      .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + d.type; });
	  
	//d3.selectAll("path").style("stroke", typesColour(function(d) { return d.type; }));

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 ; });

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 < width / 2; })
      .attr("x", 6 + sankey.nodeWidth())
      .attr("text-anchor", "start");

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);
  }
  
  
  function fade(opacity) {
  return function(g, i) {
    var elements = svg.selectAll(".node");
    elements = elements.filter(function(d) { return d.name != graph.nodes[i].name });
    elements.transition()
        .style("opacity", opacity);

svg.selectAll(".link")
        .filter(function(d) { return d.source.name != graph.nodes[i].name && d.target.name != graph.nodes[i].name })
      .transition()
        .style("opacity", opacity);
  };
}	
  
});

</script>

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

Modified http://d3js.org/colorbrewer.v1.min.js to a secure url

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

https://d3js.org/colorbrewer.v1.min.js