sankey demo

forked from anonymous's block: sankey demo

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/d3-sankey@0"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    const margin = {top:10, left:10, bottom:10, right: 10}
    let width = 960 - margin.left - margin.right
    let height = 500 - margin.top - margin.bottom
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)

let sankey = d3.sankey()
        .nodeWidth(15)
    .nodePadding(10)
    .extent([[1, 1], [width, height]])

sankey.nodeAlign(d3.sankeyRight)
    
    var nodes = [
      {id: 'Opening'},
      {id: 'Dummy'},
      {id: 'Acquisitions'},
      {id: 'Renewals'},
      {id: 'Reclaims'},
      {id: 'Lapsed'},
      {id: 'Closing'}
    ]
    
    var links = [

{source: 'Opening', target: 'Renewals', value: 30, color: 'blue'},
      {source: 'Renewals', target: 'Closing', value: 23, color: 'green'},
      {source: 'Renewals', target: 'Lapsed', value: 7, color: 'red'},
      {source: 'Acquisitions', target: 'Closing', value: 10, color: 'green'},
      {source: 'Reclaims', target: 'Closing', value: 6, color: 'green'},
      {source: 'Opening', target: 'Dummy', value: 70},
      {source: 'Dummy', target: 'Closing', value: 70},
    ]
    
    var graph = {nodes: nodes, links: links}
    
    sankey.nodeId(function(d) { return d.id })
    
    sankey(graph)
    
    console.log(graph)
    
    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");
    
      link = link.data(graph.links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", d3.sankeyLinkHorizontal())
      .attr("stroke-width", function(d) { return Math.max(1, d.width); })
      .attr("stroke", function(d) { return d.color })
      node = node
    .data(graph.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("stroke", "black")
      .attr("stroke-opacity", function(d) {
    return d.id == 'Dummy' ? '0.2' : '1';
  })
      .attr("opacity", function(d) {
    return d.id == 'Dummy' ? '0.2' : '1';
  })

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.id == 'Dummy' ? '' : d.id; })
    .filter(function(d) { return d.x0 < width / 2; })
      .attr("x", function(d) { return d.x1 + 6; })
      .attr("text-anchor", "start");

</script>
</body>

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

https://unpkg.com/d3-sankey@0