[dot enter: 09] move along

_.md

[ Launch: [dot enter: 09] move along ] 6286432 by jgautsch

config.json

{"description":"[dot enter: 09] move along","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/VS570R6.png"}

inlet.js

var data = [
  {x: 0, y:0},
  {x: 62, y:66},
  {x: 240, y:128},
  {x: 350, y:10},
  {x: 438, y:30}
  ]

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")
.attr({
  transform: "translate(" + [60, 150] + ")"
})

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

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

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


var circle = group.append("circle")
.attr({
  r: 10,
  fill: "none",
  stroke: "#4BA84B",
  "stroke-width": 4,
  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] + ")"
    }
  })
})