Animating a single line & multiple lines

Animating a line

Whilst I wouldn't want to animate every line, it can be useful on certain occasions to illustrate growth / decline, direction or geographical movement. In this situation we're using population projections that can go in all sorts of different directions depending on the underlying assumptions made. The animatelines function below shows how to animate a line by modifying the stroke-dash & stroke-dashoffset properties of a line.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Animate a line</title>

<style>

body {
  font-family: sans-serif;
}

a {
	font-size:20px;
	margin-right:30px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill:none;
}

.x.axis path {
  display: inline;
}

.y.axis path {
  display: none;
}

.axis.y .tick line 		{ 			
stroke-width:1px; 			
stroke:#ccc; 			
stroke-opacity:1;	 		
}

</style>
<body>

<div id="controls">
      <a href="javascript:;">Draw the first line</a>
      <a href="javascript:;">Animate all the lines</a>

</div>

// Look at what button was clicked
				if(whichline == 0 ){
				  
				// First set all the lines to be invisible
				d3.selectAll(".line").style("opacity","0");
				  
				// Then highlight the main line to be fully visable and give it a thicker stroke
				d3.select("#line0").style("opacity","1").style("stroke-width",4);
			  
				// First work our the total length of the line 
				var totalLength = d3.select("#line0").node().getTotalLength();
				
				d3.selectAll("#line0")
				  // Set the line pattern to be an long line followed by an equally long gap
				  .attr("stroke-dasharray", totalLength + " " + totalLength)
				  // Set the intial starting position so that only the gap is shown by offesetting by the total length of the line
				  .attr("stroke-dashoffset", totalLength)
				  // Then the following lines transition the line so that the gap is hidden...
				  .transition()
				  .duration(5000)
				  .ease("quad") //Try linear, quad, bounce... see other examples here - https://bl.ocks.org/hunzy/9929724
				  .attr("stroke-dashoffset", 0);
					  
			  }
			 
			 
			 else if(whichline == 1){
					
				d3.selectAll(".line").style("opacity","0.5");
			
				
				//Select All of the lines and process them one by one
				d3.selectAll(".line").each(function(d,i){

// Get the length of each line in turn
				var totalLength = d3.select("#line" + i).node().getTotalLength();

d3.selectAll("#line" + i).attr("stroke-dasharray", totalLength + " " + totalLength)
					  .attr("stroke-dashoffset", totalLength)
					  .transition()
					  .duration(5000)
					  .delay(100*i)
					  .ease("quad") //Try linear, quad, bounce... see other examples here - https://bl.ocks.org/hunzy/9929724
					  .attr("stroke-dashoffset", 0)
					  .style("stroke-width",3)
				})
		
			
			 }
			 
			 
	  }

</script>

</body>
</head>
</html>

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

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