sankey with animated links

Forked from https://bl.ocks.org/aholachek/5df1a95afe871be868360f312d35d057

Built with blockbuilder.org

forked from tomshanley's block: sankey with animated links

<!DOCTYPE html>
<html lang="en">

rect {
      shape-rendering: crispEdges;
      fill: grey;
      stroke: white;
      stroke-width: 2px;
    }

path {
      fill: none;
      opacity: 0.5;
    }

h1 {
      font-size: 1.4rem;
    }

</style>

</head>

<body>

<button type="button" onclick="allAnimate()">Animate</button>

var formatNumber = d3.format(",.0f"),
      format = function(d) {
        return formatNumber(d) + " TWh";
      }

var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var sankey = d3.sankey()
      .nodeWidth(15)
      .nodePadding(10)
      .size([width, height]);

var path = sankey.link();

d3.json("energy.json", function(energy) {

sankey
        .nodes(energy.nodes)
        .links(energy.links)
        .layout(32);
      
      var bkdLink = svg.append("g").selectAll(".link")
        .data(energy.links)
        .enter().append("path")
        .attr("class", "bkd-link")
        .attr("d", path)
      	.style("opacity", 0.1)
      	.style("stroke", "lightgrey")
        .style("stroke-width", function(d) {
          return Math.max(1, d.dy);
        })
        .sort(function(a, b) {
          return b.dy - a.dy;
        });

var link = svg.append("g").selectAll(".link")
        .data(energy.links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", path)
      	.style("stroke", "lightgrey")
        .style("stroke-width", function(d) {
          return Math.max(1, d.dy);
        })
        .sort(function(a, b) {
          return b.dy - a.dy;
        });

link.each(function(d) {
              setDash.call(this, d);
            });

function setDash(d) {
        var d3this = d3.select(this);
        //var totalLength = d3this.node().getTotalLength();
        d.totalLength = d3this.node().getTotalLength();
        d3this
          .attr('stroke-dasharray', d.totalLength + ' ' + d.totalLength)
          .attr('stroke-dashoffset', d.totalLength)
      }

link.append("title")
        .text(function(d) {
          return d.source.name + " → " + d.target.name + "\n" + format(d.value);
        });

var node = svg.append("g").selectAll(".node")
        .data(energy.nodes)
        .enter()
      	.append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
          return "translate(" + d.x + "," + (d.y - 2) + ")";
        })

node.append("rect")
        .attr("height", function(d) {
          return d.dy + 4;
        })
        .attr("width", sankey.nodeWidth())
      	.style('opacity', 0.2)
      	/*.on("click", function(d){
        	svg.selectAll(".link")
          	.attr('stroke-dashoffset', function(d){
              return d.totalLength
            });
        		branchAnimate(d)
      	})*/
        .append("title")
        .text(function(d) {
          return d.name + "\n" + format(d.value);
        })

node.append("text")
        .attr("x", -6)
        .attr("y", function(d) {
          return d.dy / 2;
        })
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("transform", null)
        .text(function(d) {
          return d.name;
        })
      	.style("opacity", 0.6)
        .filter(function(d) {
          return d.x < width / 2;
        })
        .attr("x", 6 + sankey.nodeWidth())
        .attr("text-anchor", "start");
    });
    
    
    let scale = 5
    
    function allAnimate() {
        
      d3.selectAll(".link")
          .transition()
        	.delay(function(d){
          	let del = d.source.x * scale
          	//console.log("del: " + del)
          	return del
        	})
          .duration(function(d){
          	let dur = (d.target.x - d.source.x) * scale
            //console.log("dur: " + dur)
          	return dur
        	})
        	.ease(d3.easeLinear)
          .attr('stroke-dashoffset', 0)
        
        d3.selectAll("rect/*, text*/")
          .transition()
        	.delay(function(d){
          	let del = (d.x * scale) - 250
          	//console.log("del: " + del)
          	return del
        	})
          .duration(500)
          .style('opacity', 1)
      }
    
    
   /* function branchAnimate(nodeData) {
      
        var links = svg.selectAll(".link")
        	.filter(function(d) {
            return nodeData.sourceLinks.indexOf(d) > -1
          });
       
     		var nextLayerNodeData = [];
        
     		links.each(function(d) {
          nextLayerNodeData.push(d.target);
        });
      
        links
          .transition()
          .duration(function(d){
          	let dur = (d.target.x - d.source.x) * scale
          	return dur
        	})
          .ease(d3.easeLinear)
          .attr('stroke-dashoffset', 0)
          .on("end", function() {
            nextLayerNodeData.forEach(function(d) {
              branchAnimate(d);
            });
          });
      }*/
    
    
  </script>

</body>

</html>

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