producing a "live" graph with D3

Solution 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.

Solution 2:

This plugin can be interesting: Cubism.

Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources. Cubism is available under the Apache License on GitHub.

An other interesting project can be Rickshaw which also leverages D3.

JavaScript toolkit for creating interactive real-time graphs

See this example: Random Data in the Future