ballOnLine

_.md

[ Launch: barGraph ] fdd5832cc3791e1b3ba5 by megaohms
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"ballOnLine","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}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var data = [
  {x: 0, y:0},
  {x: 62, y:66},
  {x: 259, y:115},
  {x: 339, y:10},
  {x: 400, 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 tx = 60;
var ty = 150;
var group = svg.append("g")
  .attr({
  transform: "translate(" + [tx, ty] + ")"
  })
  
var path = group.append("path")
  .attr({
  d: line(data),
  fill: "none",
  stroke: "#000"
  })

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

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

svg.on("click", function() {
  var dur = 2000;
  
  ball.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] + ")";
      }
    })
})
//more info on this
//http://bl.ocks.org/1313857
//http://www.carto.net/svg/samples/animated_bustrack.shtml