D3 Examples - Multi-Part Sankey

xxxxxxxxxx
 
<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://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="sankey.js" charset="utf-8" type="text/javascript"></script>
</footer>
</body>
</html>
    