index.html

## index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style>

path {
  fill: none;
  stroke: #000;
  stroke-width: 3px;

}

circle {
  fill: steelblue;
  stroke: #fff;
  stroke-width: 3px;
}

#hint {
  font: 14px 'Lato', sans-serif;
  shape-rendering: crispEdges;
  fill: #525252;
  position: absolute;
  top: 100px;
  left: 100px;
}

</style>
</head>
<body>
<div id="hint"><strong>Hint:</strong> Click the blue circle to start</div>

<script>

var points = [
  [100, 400],
  [100, 400],
  [300, 440],
  [440, 400],
  [260, 340],
  [360, 200],
  [500, 280],
  [600, 490],
  [620, 140],
  [400, 220],
  [500, 400],
  [600, 440],
  [700, 340],
  [600, 240],
  [360, 300],
  [250, 360],
  [180, 300],
  [110, 380]
];


var svg = d3.select("body").append("svg")
    .attr("width", 980)
    .attr("height", 500);

var path = svg.append("path")
    .data([points])
    .attr("d", d3.svg.line()
    .tension(.6) // Catmull–Rom
    .interpolate("cardinal-open"))
    .style("stroke", "#ddd")
    .style("stroke-dasharray", "4,4");

// svg.selectAll(".point")
//     .data(points)
//   .enter().append("circle")
//     .attr("r", 4)
//     .attr("transform", function(d) { return "translate(" + d + ")"; });


var circle = svg.append("circle")
    .attr("r", 13)
    .attr("transform", "translate(" + points[0] + ")")
    .on("click", transition);

function transition() {
  circle.transition()
      .duration(10000)
      .attrTween("transform", translateAlong(path.node()));
      // .each("end", transition);

  var pin = svg.append("path")
      .style("opacity",0)
      .attr("d", "M 50,0 C 31.294,0 16.129,15.165 16.129,33.87 c 0,0.401 0.012,0.809 0.03,1.221 0.127,3.558 0.798,6.975 1.939,10.172 C 25.324,69.015 50,100 50,100 50,100 74.673,69.018 81.9,45.266 83.043,42.069 83.713,38.649 83.839,35.091 83.859,34.679 83.87,34.272 83.87,33.87 83.871,15.165 68.706,0 50,0 z m 0,50.459 c -9.161,0 -16.589,-7.428 -16.589,-16.589 0,-9.16 7.428,-16.588 16.589,-16.588 9.162,0 16.589,7.428 16.589,16.588 0,9.161 -7.427,16.589 -16.589,16.589 z")
      .style("fill", "orange")
      .attr("transform", "translate(130,190)");

    pin.transition().delay(10000).duration(1000).style("opacity",1);

}

// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

</script>
</html>

## thumbnail.png

      
          Raw
        
        
              thumbnail.png