Q:

cannot understand why function keep getting called on d3.js

While studying code from below example, I think I almost got everything
http://jsfiddle.net/peDzT/
except I cannot for the life of me see how tick() continues to get called.(meaning, while that function continues to run and therefore continues to update the graph.
tick does not get called and there is no setinterval or anything like that. I also don't understand what .each("end", tick) does. Can someone please advise? This is using d3.js
tick();
function tick() {
  // push a new data point onto the back
  data.push(random());
  // redraw the line, and slide it to the left
  path
      .attr("d", line)
      .attr("transform", null)
    .transition()
      .duration(500)
      .ease("linear")
      .attr("transform", "translate(" + x(-1) + ",0)")
      .each("end", tick);
  // pop the old data point off the front
  data.shift();
}

A:

The two things you are confused about are connected. #each is used to handle transition events. An example of this is the end event, triggered after the transition finishes. This code is saying "after the transition finishes (i.e. when the end event is triggered), call tick. This will start a new transition and the same thing will repeat, calling tick again.

