Multi-Part Sankey

This sankey diagram of energy generation and consumption shows the total energy flow from 2010 to 2050, split into 5-year segments. 2010 is in grey, 2050 is in dark green, and each 5-year step between is in order between those. You can see, for instance, the decline in oil reserves over the 40 year period, and corresponding increase in oil imports.

This relies on a modification of the original d3.sankey to draw adjusted links. This version of d3.sankey also differs in that it draws links as areas rather than relying on stroke-width.

The sankey.adjustedLink function works like the regular sankey.link function but takes an additional adjustment and offset value. The adjustment is the percent value of the overall link, and the offset is the y-pixel offset of the link. In this case, those both correspond to the percent and order of the segments, but don't have to.

The sankey diagram itself is laid out using the parent links as you would normally use d3.sankey (in this case the total energy flow over the forty year span) and then the adjusted links are drawn afterward as appropriate.

Source: https://www.gov.uk/government/publications/2050-pathways-calculator-with-costs

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Mutli-Part Sankey</title>
  <meta charset="utf-8" />
</head>
<style>

body, html {
    margin: 0;
    padding: 0;
  }
  .viz {
    position: fixed;
    left:0;
    top:0;
    bottom:0;
    right:0;
    background:rgb(188,188,188);
  }

path.domain {
    fill: none;
  }

</style>
<script>

expData = "";
nodes = [];
edges = [];
nodeHash = {};
edgeHash = {};

function makeVizSankey() {
  d3.select(".viz")
  .append("svg")
  .attr("height", 1000)
  .attr("width", 1000)
  .style("background", "#FDFBF5")

d3.csv("energy.csv", createData);

}

function createData(data) {

//Build the network
  data.forEach(function (datum) {
    if (!nodeHash[datum.source]) {
      nodeHash[datum.source] = {id: datum.source};
      nodes.push(nodeHash[datum.source]);
    }
    if (!nodeHash[datum.target]) {
      nodeHash[datum.target] = {id: datum.target};
      nodes.push(nodeHash[datum.target]);
    }

// Each link will have a segments array made up of the 5-year values
    var newEdge = {source: nodeHash[datum.source], target: nodeHash[datum.target]};
    edgeHash[datum.source+datum.target] = newEdge;
    newEdge.weight = parseFloat(datum.total);
    newEdge.value = parseFloat(datum.total);
    newEdge.segments = [];
    newEdge.segments.push(parseFloat(datum["2010"]));
    newEdge.segments.push(parseFloat(datum["2015"]));
    newEdge.segments.push(parseFloat(datum["2020"]));
    newEdge.segments.push(parseFloat(datum["2025"]));
    newEdge.segments.push(parseFloat(datum["2030"]));
    newEdge.segments.push(parseFloat(datum["2035"]));
    newEdge.segments.push(parseFloat(datum["2040"]));
    newEdge.segments.push(parseFloat(datum["2045"]));
    newEdge.segments.push(parseFloat(datum["2050"]));

edges.push((newEdge));
  })

buildSankey();
}

function buildSankey() {

var sankey = d3.sankey()
    .nodeWidth(20)
    .nodePadding(15)
    .size([660, 460]);

var path = sankey.link();

sankey
      .nodes(nodes)
      .links(edges)
      .layout(200);

d3.select("svg").append("g").attr("transform", "translate(80,20)").attr("id", "sankeyG");

d3.select("#sankeyG").selectAll("g.link")
      .data(edges)
    .enter().append("g")
      .attr("class", "link")
      .append("path")
      .attr("class", "link overall")
      .attr("d", sankey.link())
      .style("fill", "black")
      .style("fill-opacity", .2)

d3.selectAll("g.link").each(function (link) {
    var linkElement = this;
    var offset = 0;
    link.segments.forEach(function (segment, i) {
      var adjustment = segment / link.value;
      var adjustedPath = sankey.linkAdjusted();
      d3.select(linkElement)
        .append("path")
        .attr("class", "link adjusted")
        .style("fill", "green")
        .style("fill-opacity", i / 10)
        .attr("d", adjustedPath(link, adjustment, offset));
        offset = offset + (link.dy * adjustment);
    })
  })

d3.select("#sankeyG").selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

d3.selectAll(".node").append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", 20)
      .style("fill", "darkgreen")
      .style("stroke", "none")

d3.selectAll(".node").append("text")
      .attr("x", 0)
      .attr("y", function(d) { return d.dy / 2; })
      .attr("text-anchor", "middle")
      .text(function(d) { return d.id; })
      .style("opacity", .8)
}
</script>
<body onload="makeVizSankey()">
<div class="viz"></div>
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="sankey.js" charset="utf-8" type="text/javascript"></script>
</footer>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js