Creating a live graph with D3

Question

I recently started learning how to use the D3.js framework, and although it seems that it was designed to do exactly what I want, I cannot find a simple example of a “live” update schedule.

I'm looking for something like a line chart that updates as new data arrives. New data will be obtained either by entering json-url with the "last visible" timestamp, or some other AJAX-y method.

edit: part of the D3 answer here:

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

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

Answer 1

This tutorial will help you create real-time graphical graphs: http://bost.ocks.org/mike/path/

I would like to add some more comments:

Asynchronous data

When you plot in real time, you often get data asynchronously, so you cannot know the exact time between each "point".

• You're lucky for the line, because the line described in the tutorial doesn't care about that.
• During the long smooth transition effect, this is more difficult. The key is to set the duration as the time between the last frame and the previous one. This is also a good approximation for the following, since the network almost always has the same throughput.

Axis axis

On an ordinary line graph, it is easy to determine the region y. However, with real-time data, the value of y can often be limited. 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

When data is always added, you can be very careful that you need to delete values ​​that you no longer use, otherwise your data will become heavier and the whole animation may fall.

Answer 2

Perhaps this plugin may also be interesting: Cubism .

Cubism.js is a D3 plugin for time series visualization. Use cubism to create the best real-time dashboards, extract data from Graphite, Cube and other sources. Cubism is available under the Apache license on GitHub.

---

edit:

Another interesting project might be Rickshaw , which also uses D3.

JavaScript toolkit for creating interactive real-time charts

See this example: Random data in the future.

Answer 3

These are just two examples:

• You can make the client pull new data from the server at regular intervals (i.e. use some AJAX calls).
• If the browser supports it, you can open the websocket in relation to the server so that the server can directly push new data as soon as it is available.

The choice of one or the other depends on many variables: how many connections you expect, what is the speed of data updates, what browsers you plan to support, etc.

In any case, the d3.js library is not involved in the way you receive the data, but instead in the way you display it.