Recently Alex gave us a solid introduction to the gRaphaël JavaScript
graphing library in the Design View newsletter. We
figured those of you who aren’t subscribed to the newsletter might enjoy
this piece, so we’re publishing it here. And if you happen to get a kick out
of it, why not head over to the newsletters section of
sitepoint.com and subscribe yourself up for a free monthly dose of
designery goodness. Without further ado, here’s Alex’s article.
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
| Browser | Visitors |
|---|---|
| Firefox | 1,149,422 |
| IE | 551,315 |
| Chrome | 172,095 |
| Safari | 166,565 |
| Opera | 53,329 |
| Mozilla | 18,060 |
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.
Each of these technologies use JavaScript to target standard
elements in your page—text and images respectively—and replace them with
new and more powerful vector-based equivalents. Cool stuff.
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.
Written By:
