Ball on Line - Setup

_.md

[ 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"}

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"
  })


//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