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. The data is served as pure CSV and all parsing and data wrangling is done in JavaScript. Since the size of the data is 1.1MB, I told the web server to serve the CSV file gzipped using the .htaccess code below. This reduced the data size to 360kB.

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. If you’re interested, here’s the link to my version. Also you’re invited to inspect the source code and data.

Comments

Tobias Treppmann (Dec 01, 2011)

great post. It is great to see how powerful HTML5 is. I’m curious to know if you have compared the performance of your HTML5 version with a processing.js one?

Gregor Aisch (Dec 01, 2011)

No I haven’t, but I’d bet that Ben Fry tried processing.js before sticking to Java. In his blog he wrote:

I spent a few hours on a JavaScript version, but it ran at 3 frames per second (instead of 60; it’s like 1998 again!) It also required a 6 megabyte JSON file for all the data.