Question

152

D3 Real-Time streamgraph (Graph Data Visualization)

rated 0 times [ 154] [ 2] / answers: 1 / hits: 39924 / 12 Years ago, mon, march 12, 2012, 12:00:00

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

enter

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

grant

Add To Favorites

Follow

Total Points: 169

Total Questions: 96

Total Answers: 98

Location: Cape Verde

Member since Sat, Apr 24, 2021

3 Years ago

grant questions

1 Next.js - TypeError: Cannot read properties of null (reading 'useMemo')

Tue, May 24, 22, 00:00, 2 Years ago

1 restrict child div height to parent container height

Tue, Dec 8, 20, 00:00, 4 Years ago

1 how to use useMediaQuery in class component

Thu, Jan 9, 20, 00:00, 4 Years ago

1 Refresh Parent Component While navigating From Child Component

Wed, Oct 2, 19, 00:00, 5 Years ago

1 Array .filter and .map OR .map with a if condition

Fri, Aug 2, 19, 00:00, 5 Years ago

View All

answered 12 Years ago deonkalvinw · Accepted Answer

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