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
| <!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> |
