Moving Forward Line - 20s Loop

This gist shows a line that appears to be updating with live data over time - and a point marking the front of the line.

See this d3.js animation at /benshope/bbbefc9dbd553141649b

The difficult part was animating the point to remain on the end of the animating line.

I wish there were a much simpler way to make this animation. If anyone sees this and has an idea, fork this or message me.

forked from benshope's block: Moving Forward Line - 20s Loop

forked from anonymous's block: Moving Forward Line - 20s Loop

<!DOCTYPE html>
<meta charset="utf-8"> 
<body>

var width = 800;
var height = 500;
var scrollDuration = 20000;
var lineInterpolation = 'cardinal';
var numPoints = 100;
var vizHeight = 200;
//var randomNumber = function(d) {return (d);};//d3.random.normal(0, 25);
var randomNumber = function(d) {return 25*Math.sin(.5*d);};//d3.random.normal(0, 2);
var data = d3.range(numPoints).map(randomNumber);

var x = d3.scale.linear()
    .domain([0, numPoints - 1])
    .range([0, width]);
var y = d3.scale.linear()
    .domain([-vizHeight/2, vizHeight/2])
    .range([height, 0]);
  
var svg = d3.select('body')
						.append('svg')
              .attr('width', width)
              .attr('height', height)
            .append('g');

line = d3.svg.line()
    .x(function(d, i) { return x(i); })
    .y(function(d, i) { return y(d); })
    .interpolate(lineInterpolation);

path = svg
    .append('path')
      .datum(data)
      .attr('class', 'line')
      .attr('fill', 'none')
      .attr('stroke', 'black')
      .attr('stroke-width', 2)
      .attr('stroke-linecap', 'round')
      .attr('d', line);

var point = svg
    .append('circle')
    .attr('r', 4)
    .attr('fill', 'none')
    .attr('stroke', 'red')
    .attr('stroke-width', 2);

</script>

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