D3 Real-Time streamgraph (Graph Data Visualization

Question

I would like a stream graph as in this example: http://mbostock.github.com/d3/ex/stream.html

but I would like real time data entering from the right and have old data leave from the left, such that I always have a window of 200 samples. How would I do this such that I have the appropriate transitions?

I tried changing the data points in the array a and then recreating an area as such

  data0 = d3.layout.stack()(a);

but my transitions do not make it look like the chart is sliding across the screen.

Thanks in advance.

Answer 1

Try this tutorial:

When implementing realtime displays of time-series data, we often use the x-axis to encode time as position: as time progresses, new data comes in from the right, and old data slides out to the left. If you use D3’s built-in path interpolators, however, you may see some surprising behavior...

To eliminate the wiggle, interpolate the transform rather than the path. This makes sense if you think of the chart as visualizing a function—its value isn’t changing, we’re just showing a different part of the domain. By sliding the visible window at the same rate that new data arrives, we can seamlessly display realtime data...

Answer 2

Here is a simple example: http://jsfiddle.net/cqDA9/1/ It shows a possible solution to keeping track and updating the different data series.

var update = function () {
    for (Name in chart.chartSeries) {
        chart.chartSeries[Name] = Math.random() * 10;
    }
    for (Name in chart2.chartSeries) {
        chart2.chartSeries[Name] = Math.random() * 10;
    }
    setTimeout(update, 1000);
}
setTimeout(update, 1000);