producing a "live" graph with D3

Question

I've recently started learning to use the D3.js framework and, while it seems like it's been designed to do exactly what I want, I can't find a simple example of a "live" updating graph.

I'm looking for something like a line chart that updates as new data becomes available. New data would be obtained either by hitting a json url with a "last seen" timestamp or some other AJAX-y method.

edit: The D3 part of the answer is here:

http://bost.ocks.org/mike/path/

Now, how do people recommend getting the new data from the server to the client?

Answer 1

This tutorial can help you a lot to create a real time line graph: http://bost.ocks.org/mike/path/

I would like to add a few more comments:

Asynchronous data

When you do a real time graph, you often get the data asynchroneously, thus you cannot know the exact time between each "point".

• For the line, you are lucky because the line described in the tutorial doesn't care about that.
• For the duration to have a smooth transition effect, it is trickier. The key is to set the duration to be the time between the last frame and the previous one. This is also a good approximation for the next one as the network has almost always the same throughput.

Y Axis

On a conventional line graph, it is easy to determine the y domain. However with live data, the y value can often go off limit. This is why I would recommend calling a function to set the y domain at each iteration. You can also create a bounding box.

Performance

As the data is always added you might want to be very attentive to the fact that you HAVE to delete the values you don't use anymore, otherwise your data will keep getting heavier and the whole animation might crash.