This primer suggests the value of sending a shiny object through a pipe in plain view. This is a straight line, but it would be nice to see the circle flow through an alluvial pipe.
April 23, 2014 - See Point-Along-Path Interpolation for a code example that shows a ball following a closed spline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pulse</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
body {
font: 10px sans-serif;
}
.pulse line {
stroke: #5e3c99;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script type="text/javascript">
var width = 960,
height = 500;
line = d3.svg.line();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var launcher = svg.append("g")
.attr("transform", "translate( 50," + height / 5 + ")")
.attr("cursor", "pointer")
.on("click", function() { sendpulse(); });
launcher.append("circle")
.attr("cx", "30")
.attr("cy", "0")
.attr("r", "28")
.attr("fill", "#e66101");
launcher.append("text")
.attr("x", "13")
.attr("y", "5")
.attr("fill", "#f7f7f7")
.attr("font-weight", "bold")
.attr("font-size", "14px")
.text("Press");
var g = svg.append("g")
.attr("class", "pulse")
.attr("transform", "translate( 50," + height / 3 + ")");
g.append("line")
.attr("x1", "0")
.attr("y1", "0")
.attr("x2", "400")
.attr("y2", "0")
.attr("stroke-width", "24");
sendpulse = function() {
// make a circle, move it, remove it on exit
svg.append("circle")
.attr("cx", "40")
.attr("cy", height / 3)
.attr("r", "12")
.attr("fill", "white")
.transition()
.attr("cx", "500")
.duration(1500)
.remove();
}
</script>
</body>
</html>