D3 Examples - Sankey Diagram

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="sankey.js"></script>
  <script src="align.js"></script>
  <script src="sankeyLinkHorizontal.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <div style="overflow-x: auto;">
    <svg width="1860" height="700"></svg>
  </div>
  <script>
    var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");
​
    var formatNumber = d3.format(",.0f"),
        format = function(d) { return formatNumber(d) },
        color = d3.scaleOrdinal(d3.schemeCategory10);
    
    var sankey = d3.sankey()
            .nodeId(function id(d) {console.log(d.node, d.name); return d.node})
        .nodeWidth(35)
        .nodePadding(60)
        .nodeAlign(d3.sankeyJustify)
        .iterations(20)
        .extent([[1,1], [width - 1, height - 6]]);
​
    var link = svg.append("g")
        .attr("class", "links")
        .attr("fill", "none")
        .attr("stroke", "#000")
        .attr("stroke-opacity", 0.2)
      .selectAll("path");
    
    var node = svg.append("g")
        .attr("class", "nodes")
        .attr("font-family", "sans-serif")
        .attr("font-size", 10)
      .selectAll("g");
    
    d3.json("data.json", function(error, data) {
        if (error) throw error;
​
      sankey(data.sankey);
​
      link = link
        .data(data.sankey.links)
        .enter().append("path")
          .attr("d", d3.sankeyLinkHorizontal())
          .attr("stroke-width", function(d) { 
                    return Math.max(1, d.width / 2); 
            });
​
      link.append("title")
          .text(function(d) { 
                return d.source.name + " → " + d.target.name + "\n" + format(d.value); 
            });
​
​
      node = node
        .data(data.sankey.nodes)
        .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; })
          .attr("fill", function(d) { return color(d.name.replace(/ .*/, "")); })
          .attr("stroke", "#000");
​
      node.append("text")
          .attr("x", function(d) { return d.x0 - 6; })
          .attr("y", function(d) { return (d.y1 + d.y0) / 2; })
          .attr("dy", "0.35em")
          .attr("text-anchor", "end")
          .text(function(d) { return d.name; })
        .filter(function(d) { return d.x0 < width / 2; })
          .attr("x", function(d) { return d.x1 + 6; })
          .attr("text-anchor", "start");
​
      node.append("title")
          .text(function(d) { return d.name + "\n" + format(d.value); });
    });
  </script>
</body>
​
    