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

enter image description here

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.

score 35 · Accepted Answer · edited Oct 05 '16 at 06:31

35

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

edited Oct 05 '16 at 06:31

gnat

6,213
108
53
73

answered Mar 12 '12 at 12:31

mbostock

51,423
13
175
129

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("transform", "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 Mar 13 '12 at 07:09
I've posted my example here: http://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! – rustybeanstalk Mar 13 '12 at 07:22
That's most of what I was looking for with my question here: http://stackoverflow.com/questions/12764813/producing-a-live-graph-with-d3 How do you recommend getting the data from the server to the client? – Chris Withers Oct 06 '12 at 23:49
i already write waves in http://jsfiddle.net/gamealchemist/DAShs/1/..But how to create like this in D3js.Can you please give me sample – Karthik Oct 08 '13 at 10:18
6

While this answer may theoretically answer the question, [it is better](http://meta.stackexchange.com/a/8259/237685) to include the essential parts of the answer here, and provide the link for reference. – hichris123 May 26 '14 at 17:55
Hello, is there anyway to do this in a Java desktop aplication ? – Jonathan Solorzano Aug 03 '14 at 16:01
If you translate infinitely wont you run into large numbers and run out of memory? – PirateApp Aug 25 '18 at 02:02

score 8 · Answer 2 · edited Dec 07 '13 at 01:28

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

D3 Real-Time streamgraph (Graph Data Visualization)

2 Answers2

Linked