var width = 960,
    height = 500

var svg = d3.select('html')
  .append('svg')
    .attr({width: width, height: height})
    .on('mousemove', updatePos)

svg.append('rect')
    .attr({width: width, height: height, opacity: 0})

var circle = svg.append('circle')
    .attr('r', 10)
    .attr('cx', width/2)
    .attr('cy', height/2)
    .style({stroke: 'black', fill: 'lightgrey', 'stroke-width': 2})


var vel = 0
var cx = width/2
var mx = width
var speedCap = 10



d3.timer(function(){
  var dist = mx - cx
  var absDist = Math.abs(dist)
  vel += (mx - cx)/1000
  vel = clamp(-absDist/speedCap, vel, absDist/speedCap) 
  cx  += vel

  circle.attr('cx', cx)
})


function updatePos(){
  var pos = d3.mouse(this)
  mx = pos[0]
  speedCap = pos[1]/height*40
}

function clamp(a, b, c){ return Math.max(a, Math.min(b, c)) }