Pulse Primer

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="https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js