Efficient Continuous Scrolling Graph with SVG HTML CSS

Question

I have created a real-time graph where new data points are continuously being fed in and plotted.

Currently I am using requestAnimationFame() where I render the updated positions of the elements 30 times per second.

With many SVG elements, this can get a little slow.

What is the most efficient way to implement a continuously scrolling graph like this with SVG animations, CSS animations, or CSS transitions. (Without 3rd party libraries).

Thanks in advance.

Do you have to display them all? – agconti Nov 28 '13 at 04:05 — agconti, Nov 28 '13 at 04:05
Nope, a windows of the last 30 seconds is fine. – rustybeanstalk Nov 29 '13 at 19:56 — rustybeanstalk, Nov 29 '13 at 19:56

agconti · Accepted Answer · 2013-11-28T05:02:24.440

Here is a pretty good solution in a Fiddle.

It's from Mike Bostock and his awesome tutorial on using D3. In that tutorial; Mike explains how accomplish the Fiddle from scratch, but the important part for you is the redraw function:

function redraw() {

     var rect = chart.selectAll("rect")
         .data(data, function (d) {
         return d.time;
     });

     rect.enter().insert("rect", "line")
         .attr("x", function (d, i) {
         return x(i + 1) - .5;
     })
         .attr("y", function (d) {
         return h - y(d.value) - .5;
     })
         .attr("width", w)
         .attr("height", function (d) {
         return y(d.value);
     })
         .transition()
         .duration(1000)
         .attr("x", function (d, i) {
         return x(i) - .5;
     });

     rect.transition()
         .duration(1000)
         .attr("x", function (d, i) {
         return x(i) - .5;
     });

     rect.exit().transition()
         .duration(1000)
         .attr("x", function (d, i) {
         return x(i - 1) - .5;
     })
         .remove();

 }

It will add a new rect based on incoming data and fade the oldest rect out, and so creates your desired scrolling action. This should be pretty easy to adapt to your needs but it does assume a fixed amount of rects.

It seems that you might want to have an unrestricted amount of rects on the screen at any given time from your question, but ultimately this is undesirable. You can set the amount of rects to display to largest amount that still allows your site to be performant. Anymore and it will crash for you and your users. Fading one in as one Fades out is more efficiently than continually loading once the svg count gets high enough.

Thanks, this is a great tutorial, but I do not want to use any third party libraries like D3. I was wondering what makes an animation like that efficient. Are they using CSS transitions? — rustybeanstalk, Nov 29 '13 at 19:58
Why don't you want to use third party libraries? This can all be done done in pure java script, ( that's how the library does it), but it would take you an inordinate amount of extra development time to do it yourself . I recommended d3 because it's made so well. — agconti, Nov 29 '13 at 21:26
You can dig through the d3 project and use it as a road map to do this yourself in pure js. — agconti, Nov 29 '13 at 21:29
Also can transitions will work well if your looking to go that route. — agconti, Nov 29 '13 at 21:29

Efficient Continuous Scrolling Graph with SVG HTML CSS

1 Answers1