Concurrent transitions: make fountain or popcorn with circles by maartenzam

Parallel but different interpolations for x (ease(“sin”)) and y (ease(“back”)) positions of circles. Creates a fountain or popcorn effect. Try more (~1000) circles for waterfall effect.

Inspiration: Concurrent transitions by @mbostock, Easing Checker

index.html

<!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>
	<button style="position: absolute; top: 20; left: 20;font-size: 24px; padding: 8px; background-color: #9a0b16; color: white; width: 100px;border: none;">Go!</button>
  <script>
    var margin = {top: 0, right: 0, bottom: 0, left: 0};
    var width = 960;
    var height = 500;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);  
	  
	function run() {  
		d3.selectAll("circle").remove();

		for (i = 0; i < 100; i++) {
			var rand = Math.random();
			svg.append("circle")
				.attr({cx: width/2, cy: 60, r: 7, opacity: 0.7})
				.style({ fill: "#a72d1a"})
					.call(interpoly, 2000, rand*10000)
					.call(interpolx, 2000, rand*10000);
    	}
		
		d3.select("button").text("Again!");
	}
	  
	  function interpolx(circle, duration, delay) {
  		circle.transition("interpolx")
		.ease("sin")
		.delay(delay)
      	.duration(duration)
      	.attrTween("cx", function tween(d, i, a) {
  				return d3.interpolate(a, Math.random()*width);
					})
	 }
    
    function interpoly(circle, duration, delay) {
  		circle.transition("interpoly")
		.ease("back")
		.delay(delay)
      	.duration(duration)
      	.attrTween("cy", function tween(d, i, a) {
  				return d3.interpolate(a, (450));
					})
	}
	  
	d3.select("button").on("click", run);
  </script>
</body>