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="http://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> |
combined with a sankey might be very nice