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.

Solution 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...

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

Comments

[rustybeanstalk]

Thanks! I ran through the tutorial, but I had a lot of trouble trying to extrapolate that to the stream graph example. I finally used this line of code to shift my multiple paths over. vis.selectAll("path").data(data0).attr("d", area).attr("transform", null).transition().duration(50).ease("linear").attr("transfo‌​rm", "translate(" + -10 + ")").each("end", function (d,i) { if (i==0) transition();}); I can only recursively call transition on the first path, otherwise the entire graph shifts once for everypath, and then I have an explosion of callbacks. Is there a better way to do this? Thanks!

[rustybeanstalk]

I've posted my example here: lyngbaek.com/real-time-stream-graph.html every so often the bottom 'path' gets misaligned from the 'top' one, probably by the way I do my recursive transition() call. I extrapolated from your tutorial and created a separate data array for the top and bottom paths. Then I individual push a new value to each of them. I have to then recompute a new d3.layout.stack() and redraw it. I then shift my 2 data arrays and repeat. Is this the correct methodology, or is there a cleaner way to do it. Thanks again!

[Chris Withers]

That's most of what I was looking for with my question here: stackoverflow.com/questions/12764813/… How do you recommend getting the data from the server to the client?

[Karthik]

i already write waves in jsfiddle.net/gamealchemist/DAShs/1/..But how to create like this in D3js.Can you please give me sample

[hichris123]

While this answer may theoretically answer the question, it is better to include the essential parts of the answer here, and provide the link for reference.

[Jonathan Solorzano]

Hello, is there anyway to do this in a Java desktop aplication ?

[PirateApp]

If you translate infinitely wont you run into large numbers and run out of memory?