Multi-Part Sankey

hello world

forked from emeeks's block: Multi-Part Sankey

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

Modified http://d3js.org/d3.v3.min.js to a secure url

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