Sankey - test link sorting

Updated to v0.25.0 of the d3-sankey-circular

forked from tomshanley's block: Sankey with circular links and self-linking nodes

forked from tomshanley's block: Sankey with Minard labels on the links

forked from tomshanley's block: Sankey with Minard dots for different link types

forked from tomshanley's block: Sankey with transition

<!DOCTYPE html>
<html>

<head>

<title>Sankey with circular links</title>
  <style>
    body {
      font-family: sans-serif;
    }
    
    h1 {
      color: #8e0152
    }
    
    span {
      font-weight: bold
    }

rect {
      shape-rendering: crispEdges;
    }

text {
      font-size: 12px;
    }

path {
      fill: none;
      opacity: 0.5
    }
    
    .lower {
      text-anchor: end
    }
    
    /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #8e0152;
}

input:focus + .slider {
  box-shadow: 0 0 1px #8e0152;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
    
  </style>
</head>

<body>

<h1>Sankey with circular links</h1>

const nodePadding = 40;
    const circularLinkGap = 2;

var sankey = d3.sankeyCircular()
      .nodeWidth(10)
      .nodePadding(nodePadding)
      .nodePaddingRatio(0.3)
      .size([width, height])
      .nodeId(function (d) {
        return d.name;
      })
      .nodeAlign(d3.sankeyRight)
      .iterations(32);

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

var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var linkG = g.append("g")
      .attr("class", "links")
      .attr("fill", "none")
      .selectAll("path");
    
    var linkLabels = g.append("g")

var nodeG = g.append("g")
      .attr("class", "nodes")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
      .selectAll("g");

//run the Sankey + circular over the data
    sankeyData = sankey(sankeyData);
    
    var node = nodeG
    	.data(sankeyData.nodes, function(d){ return d.name })
      .enter()
      .append("g");

node.append("rect")
      .attr("x", function (d) { return d.x0; })
      .attr("y", function (d) { return d.y0; })
      .attr("height", function (d) { return d.y1 - d.y0; })
      .attr("width", function (d) { return d.x1 - d.x0; })
      .style("fill", "#C89776")

node.append("text")
      .attr("x", function (d) { return (d.x0 + d.x1) / 2; })
      .attr("y", function (d) { return d.y0 - 12; })
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function (d) { return d.name; });
    
    var link = linkG.data(sankeyData.links, function(d) { return d.index})
      .enter()
      .append("g")
    
    link.append("path") 
      .attr("class", "sankey-link")
      .attr("d", function(link){
        return link.path;
      })
      .style("stroke-width", function (d) { return d.width; })
      .style("stroke", "grey")

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

</script>
</body>

</html>

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

https://d3js.org/d3-scale-chromatic.v1.min.js