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();

}

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();

}

• javascript
• d3.js
• real-time
• transition
• nvd3.js

1 Answer 1

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