move_along

_.md

[ Launch: move_along ] 7092576 by jshumakerpruitt

config.json

{"description":"move_along","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/qygWXEN.gif","ajax-caching":true}

inlet.js

var data = [
  {x: 10, y:10},
  {x: 89, y:50},
  {x: 171, y:14},
  {x: 263, y:54},
  {x: 366, y:11}
  ];

var line = d3.svg.line()
  .x(function(d){
    return d.x;
  })
  .y(function(d){
    return d.y;
  })

var svg = d3.select("svg");

var group = svg.append("g");


var path = group.append("path")
.attr({
  d: line(data),
  stroke: "#000",
  fill: "none"
});

var len = path.node().getTotalLength();
var offset = 0;

path.attr({
  "stroke-dasharray": len + " " + len,
  "stroke-dashoffset": offset
})


var circle = svg.append("circle")
.attr({
  r: 9,
  transform: function(){
    var p = path.node().getPointAtLength(len - offset);
    return "translate(" + [p.x, p.y] + ")";
  }
});

svg.on("click", function(){
  var dur = 2000;
  path.transition()
  .duration(dur)
  .ease("bounce")
  .attrTween("stroke-dashoffset", function(d,i){
    return function(t){
      return len * (1 - t);
    }
  })

  circle.transition()
  .duration(dur)
  .ease("bounce")
  .attrTween("transform", function(d,i){
    return function(t){
     var p = path.node().getPointAtLength(len*t);
    return "translate(" + [p.x, p.y] + ")";
    }
  })
});