Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3 Real-Time streamgraph (Graph Data Visualization) [closed]

Tags:

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.

like image 937
rustybeanstalk Avatar asked Mar 12 '12 09:03

rustybeanstalk


2 Answers

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

like image 198
mbostock Avatar answered Sep 20 '22 18:09

mbostock


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);
like image 40
Jerm Avatar answered Sep 23 '22 18:09

Jerm