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.
Think you can do better?
Render Queue is only 70 lines long and licensed under the WTFPL.
So do it.
Return a renderQueue by passing in a function which renders one data point.
Populate the queue with an array of data and begin rendering.
Provide a function which clears the canvas. This is called when new data is passed in.
Add an array of data to the queue and render it.
Invalidate the queue and stop rendering.
Get or set the number of data entries to be rendered each frame.
Get the length of the queue. This decreases as rendering occurs.
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.