Flashy Graphs Sans Flash
Take a quick look at the browser usage statistics below. How long did it take you to build a mental model of what the data was saying?
Table 1. Browser usage statistics
Five seconds? Ten? Maybe you lost interest and drifted off.
Now compare that with a pie chart of the same information, in Figure 1, “Browser usage pie chart”
While it’s by no means impossible to understand the table, most of us can gain a better understanding with a cursory glance at the pie chart.
Okay, so we all agree graphs are groovy, but how do we use them on the Web? Let’s break down your current options.
The most obvious approach is the one I’ve used in the example above: create the graph in a third-party application (for instance, Photoshop, Illustrator, Fireworks, or otherwise) and export an image file to embed in your page.
While this is simple, the downsides are fairly obvious.
Firstly, any new or changed data requires editing and re-uploading of your image. If you’re technically savvy, however, server-side code libraries such as PHP’s GDLibrary allow you to create on-the-fly JPEGs.
Secondly, your data is “baked” into the image file, meaning there’s no easy way to convert your information back into numbers. The image is also permanently locked at one size and resolution. Hardly disastrous, but less than ideal.
Interactive graphs and charts have been one of Flash’s great success stories, particularly their ability to mingle seamlessly with standard HTML web content.
Google Analytics is arguably the current world poster boy of dynamic Flash infographics. Dozens of libraries now exist (Inchoo, FusionCharts, and Flash Graph Application, for starters) to make presenting your data with Flash relatively painless.
Although I think data visualization is one of the great applications for Flash, it still inherits some of the baggage associated with Flash. For me, the number one issue is poor mobile browser support, specifically Safari. However, Apple’s position on Flash seems to make change unlikely in the near future.
Arguably, the most exciting new web technology of 2009 was the handful of new vector-powered graphics systems to emerge. Indeed, in the Design View we’ve already covered the Cufon text replacement system and the RaphaelJS drawing library.
Let me introduce gRaphaël—Raphaël’s little brother. While “Raph” is an all-round vector-drawing guy, gRaphaël sticks to what he does best: drawing slick, animated, web-based graphs without the need for Flash.