Transitions

Inspired by Scott Murray's Transitions Presentation

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg");
    var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
    
    svg.selectAll("circle")
    	.data(dataset)
      .enter()
      .append("circle")
    	.style({ fill: "#a72d1a"})
      .transition().duration(10000).ease("bounce")
      .style({ fill: "#5db9e3"})
    	.attr("cx", function(d, i){return (i * 40)+40;})
    	.attr("r", function(d, i){return d})
    	.attr("cy", "100%");
    
    var trans = function(){
    d3.selectAll("circle")
        	.transition().duration(1000).ease("bounce")

.delay(function(d, i) {
      		return i * 100;
   		 })
      .attr("cx", function(d, i){return (i * 31)+20;})
    	.attr("r", function(d, i){return d})
    	.attr("cy", "100%")
    	.transition().duration(2000).ease("bounce")
    	.attr("r", "5%")
      .attr("cy", "50%")
    	.transition().duration(2000).ease("bounce")
      .attr("r", function(d, i){return d})
      .attr("cy", "0%")
    	.transition().duration(2000).ease("bounce")
      .attr("r", "5%")
      .attr("cy", "50%")
    	.transition().duration(2000).ease("bounce")        
      .attr("r", function(d, i){return d})
      .attr("cy", "100%")
    	.each("end", trans)
    }
    
    trans();

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js