move along

_.md

[ Launch: Tributary inlet ] 9655643 by k-izzo

config.json

{"description":"move along","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"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,"ajax-caching":true,"thumbnail":"http://i.imgur.com/3RAIj7K.png"}

inlet.coffee

data = [
	{x: 20, y: 30},
	{x: 5, y: 33},
	{x: 11, y: 20},
	{x: 20, y: 40},
	{x: 35, y: 70},
	{x: 50, y: 10}
]

data.sort((a, b) -> a.x - b.x)

cw = 600
ch = 250

xs = d3.scale.linear()
	.domain([0, d3.max(data, (d) -> d.y)])
  	.range([0, cw])
    
ys = d3.scale.linear()
	.domain([0, d3.max(data, (d) -> d.y)])
  	.range([ch, 0])

line = d3.svg.line()
	.x((d) -> xs(d.x))
  	.y((d) -> ys(d.y))

svg = d3.select('svg')

g = svg.append('g')
	.attr('transform', 'translate(' + [20,100] + ')')
  	
path = g.append('path')
  .classed('guide', true)
  .attr({
         d: line(data)
         fill: 'none'
         stroke: 'black'
         })

#len = path.node().getTotalLength()
len = 53

circle = g.append('circle')
  .attr({
         cx: path.node().getPointAtLength(len).x
         cy: path.node().getPointAtLength(len).y
         r: 10
         fill: 'steelblue'
         })