Real time line graph with nvd3.js

Question

I am trying to create a real time graph using nvd3.js which would be updated periodically and with the impression that the data is processed in real time.

For now I have been able to create a function which would update the graph periodically but I cannot manage to have a smooth transition between "states" like the line doing a transition to the left.

Here is what I did using nvd3.js , here the interesting code is:

d3.select('#chart svg')
    .datum(data)
    .transition().duration(duration)
    .call(chart);

Now, I have been able to produce what I want using d3.js but I would prefer to be able to use all the tools provided by nvd3.js. Here is what I would like to produce using nvd3

The interesting code for the transition using d3.js is:

function tick() {

    // update the domains
    now = new Date();
    x.domain([now - (n - 2) * duration, now - duration]);
    y.domain([0, d3.max(data)]);

    // push the accumulated count onto the back, and reset the count
    data.push(Math.random()*10);
    count = 0;

    // redraw the line
    svg.select(".line")
        .attr("d", line)
        .attr("transform", null);

    // slide the x-axis left
    axis.transition()
        .duration(duration)
        .ease("linear")
        .call(x.axis);

    // slide the line left
    path.transition()
        .duration(duration)
        .ease("linear")
        .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
        .each("end", tick);

    // pop the old data point off the front
    data.shift();

}

Solution

You probably want to look at: D3 Real-Time streamgraph (Graph Data Visualization),

especially the link of the answer: http://bost.ocks.org/mike/path/

In general, I see two ways to deal with the vertical transition problem:

• oversampling having some linear interpolation between the real point, and the smaller the interval between points, the more "horizontal" the vertical transition will look (but the drawback is that you get a lot of "false" points, that may be inacceptable depending on the use of the chart)
• extend the chart by adding at the end, and translate the chart on the left, making sure the still available left part is not shown until you remove it (clipping it or doing any other trick), that's best, and the solution mentioned above does that

Comments

[Christopher Chiche]

I agree with all you say. However my problem is doing so using nvd3 instead of d3. The first link in my question shows what I have for now in nvd3 and the second one shows the fully working version I have with d3.js. Your second method is the one I use for the d3 solution.

[PirateApp]

upvoted! isnt the translating thing bad, lets say you keep incrementing by 100 surely at some point you are going to run into heavy calculations like adding 100 to 1e27