Ball on Line - Setup

_.md

[ Launch: Ball on Line - Setup ] 97ae2795a7bbf6ee334a by ahlusar1989
[ Launch: Tributary inlet ] 5565487 by lewis500

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":652,"height":647,"hide":false},"endpoint":"","description":"Ball on Line - Setup","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"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/gV55L86.png","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 group = svg.append("g")
  .attr({
  transform: "translate(" + [60, 150] + ")"
  })
  
var path = group.append("path")
  .attr({
  d: line(data),
  fill: "none",
  stroke: "#000"
  })


var circle = svg.append("circle")
    .attr("r", 8.5)
    .attr("transform", "translate(0," + -h / 3 + ")");

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

transition();

// 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 + ")";
    };
  };
}



//now create a ball and animate it to move along a line.



//more info on this
//http://bl.ocks.org/1313857
//http://www.carto.net/svg/samples/animated_bustrack.shtml
    
    

inlet.svg