D3 Examples - Moving Forward Line

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8"> 
<body>
​
<script src="//d3js.org/d3.v3.js"></script>
<script>
​
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);
​
var pathLength = path.node().getTotalLength();
//console.log(pathLength, path.node().getPointAtLength(pathLength*.9).x);
function tick() {
  path
      .attr('stroke-dasharray', pathLength + ' ' + pathLength)
      .attr('stroke-dashoffset', pathLength);
  svg
    .transition()
      .duration(scrollDuration)
      .ease('linear')
      .tween("all", function() {
        return function(t) {
          var p = path.node().getPointAtLength(t * pathLength);
          point.attr('transform', 'translate(' + p.x + ',' + p.y + ')');
          path.attr('stroke-dashoffset', (1-t)*pathLength);
        };
      })
      .each('end', tick);
}
tick();
​
</script>
​
    