Learnin' paths

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  svg {
    background-color: steelblue;
  }

circle {
    fill: tomato;
  }

.line {
    stroke: tomato;
  }
</style>
<body>
  <input type="range" min=0 max=400 oninput="draw(this.value)">
</body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
  var width = 500,
      height = 500;

var line = d3.svg.line();

var svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height);

var path = svg.append('path');

draw = function(offset) {
    console.log(offset);

var points = [[50, 250], [50 + parseInt(offset), 250]];

var circleSelection = svg.selectAll('circle')
      .data(points);

var newCircles = circleSelection.enter().append('circle')
      .attr('r', 15);

circleSelection
      .transition()
      .ease('linear')
      .attr('cx', function(d) { return d[0]; })
      .attr('cy', function(d) { return d[1]; });

path.datum(points)
      .transition()
      .ease('linear')
      .attr('d', line)
      .attr('class', 'line');
  }

draw(150);

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js