Sankey Diagram

<!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>

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