These are just two examples:

  1. You can make the client pull the new data from the server at regular intervals (i.e. using some AJAX calls).
  2. If the browser supports it, you can open a websocket towards the server, so that the server can directly push new data as soon as they are available.

Choosing one or the other depends on many variables: how many connections do you expect, what is the update rate of the data, which browsers you plan to support, etc...

In any case, the d3.js library is not involved in how you get the data, but instead in how you display them.


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


This tutorial can help you a lot to create a real time line graph:

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.


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.

Related Query