More for exercising than for competition reasons, I recently recreated a great Processing visualization by Ben Fry using HTML5. I had the strong feeling that the kind of animation is totally doable without plugins like Java and Flash. This post sums up what I learned.
Initially I wanted to use the relatively new PaperJS library for the animation part. I managed to use JQuery along with PaperJS, loaded the CSV file and started to draw all those company lines (500 per year for 55 years = 27500 lines). Since using the Path for just drawing simple 1px lines would be way to much overhead, I grabbed the canvas context directly and used the “native” fillRect(). The drawing took around 900ms. Removing the PaperJS library reduced drawing time to 350ms. Then I replaced the fillRect() with direct pixel manipulation using getImageData() and finally got to 50ms which is like 20 fps.
After showing this to the world, Moritz Stefaner reminded me to use requestAnimationFrame instead of setInterval(), which gave the visualization the final performance boost.
For drawing of the spline I could’ve used the bezierCurveTo() function, but this way I would have to hazzle around with the curve control points, which I didn’t want to. Instead, I added another canvas “layer” on top, that is now used by PaperJS to draw the smoothed paths. Both apps communicate through a simple and global accessible API which allows the jQuery-app to draw, update and remove splines. This was fast enough to animate the curves.
AddOutputFilterByType DEFLATE text/html text/plain text/csv
After all, remaking an existing visualization was quite a fun thing to do. I learned some new things about working with HTML5 and finally had the chance to use the promising PaperJS library for the first time. Also, in Ben’s initial version the profits view doesn’t show companies with negative profits, which I didn’t realize until I started working with the raw data myself.