Render Queue

Progressive rendering for too much data.

This page has 600,000 randomly placed points with HCL color space interpolation. By putting the data in a queue and rendering 1,000 dots per frame, the page slowly builds up the final image. Using requestAnimationFrame, the page remains responsive during rendering.

There is a pause on page load as the data is generated. This could be improved by processing the data in a queue, and running both the processing and rendering queues concurrently.

Another good improvement would be a logging pattern for performance benchmarks.

This pattern based on the performance tests of Steven Bannasch and Ger Hobbelt and polyline rendering from Nutrient parallel coordinates.

Think you can do better?

Render Queue is only 70 lines long and licensed under the WTFPL.
So do it.

API Reference

renderQueue(function)

Return a renderQueue by passing in a function which renders one data point.

queue(data)

Populate the queue with an array of data and begin rendering.

queue.clear(function)

Provide a function which clears the canvas. This is called when new data is passed in.

queue.add(data)

Add an array of data to the queue and render it.

queue.invalidate()

Invalidate the queue and stop rendering.

queue.rate(num)

Get or set the number of data entries to be rendered each frame.

queue.remaining()

Get the length of the queue. This decreases as rendering occurs.

License

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 
Version 2, December 2004 

Copyright (C) 2012 Kai Chang  

Everyone is permitted to copy and distribute verbatim or modified 
copies of this license document, and changing it is allowed as long 
as the name is changed. 

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 

0. You just DO WHAT THE FUCK YOU WANT TO.