Let’s dive straight into a complete working example.
Load this code into any browser—either by hand or on a site like jsFiddle that lets you experiment with code—and with any luck, you will see this:
See this code live on jsFiddle.
If you’re not impressed yet, don’t worry. You’ve actually seen something pretty neat. Let’s go over what we just did:
<div>element with the id
What excites me most about Raphael is that it is not just about drawing, but about writing commands that instruct the browser to draw something a specific way when the user loads your web page. As we will see, the browser has prodigious artistic talents if you offer it the proper guidance.
Best of all, Raphael works on nearly every browser, including old ones like Internet Explorer 7 and 8, which plenty of people still use. (As much as we all wish this was not the case, this is still a legitimate concern for anyone wishing to reach a wide audience.) Raphael does not require any external plug-ins like Flash or Java, making it much friendlier for mobile devices. If you want to ensure that as many people as possible see your work, there is currently no better solution than Raphael for interactive visualizations.
This book will take you from that modest red dot to lively, interactive graphics and visualizations in just a few chapters, no matter where you’re coming from or how much you do or don’t know about the Web. And we’ll have a good time doing it.
I am always a bit puzzled when people talk about data visualization as though it’s a new frontier on the Web, because in some sense everything on the Web is a data visualization. Whether you are hand-coding files for your Harry Potter fan fiction site, dreaming up a video game that runs in the browser, or relaunching a major website for your company, your job is to take a lot of information and present it to your users in a way that is easy to understand and (ideally) not too horrible to look at.
All Web development consists of writing instructions for a program—the browser—to interpret and assemble into a data visualization, even if that visualization is as simple as some black words against a white background. This can be a maddening process, since not everyone uses the same browser for the assembly process, and because no two browsers fully agree on what the final product should look like. But on the whole, I think the browser is one of the most underappreciated strokes of genius in recent human history. Visual information is no longer produced by an artist or designer, copied a bunch of times, and then distributed to customers. Instead, it is transmitted as a series of instructions and put together on the spot. It’s as if, instead of offering a book of famous paintings, your local bookstore offered you the paint itself and some very precise instructions on how to produce The School of Athens.
This would be a stupid way to distribute great masterpieces, but it is a brilliant way to transmit web pages. Computers are much better at following instructions than you are and much faster at doing it, and a set instructions—that is, code—is much easier to transmit than the final product. On top of that, computers are animated and responsive. The fellows and ladies in The School of Athens will not respond no matter how many times you poke and prod them before Vatican security hunts you down. Computer visualizations, by contrast, can morph and transform on demand, like photographs in Harry Potter. Raphael is the toolkit that allows you to breathe magic and life into images that you create.
There are a few different Web-based technologies you can use for interactive visuals online, from the rapidly aging Flash platform to those that take advantage of the adolescent HTML5
<canvas> element. I see three main reasons to use Raphael:
Because the drawing tools are native to browsers, Raphael does not require any plug-ins or other third-party tools either to view or to compose. All you need is a browser and a text editor.
If you’re interested in how SVG works, O’Reilly publishes an SVG Essentials guide that’s worth the price just for the picture of the great argus pheasant on the front. If, like me, you’re not that interested, that’s fine too. The beauty of Raphael is that it takes care of all of the drawing behind the scenes.
Raphael is also considerably easier to learn. At work, I use D3 for projects that specifically call for it, and Raphael for everything else. (D3 also does not work on Internet Explorer 8 and below, unlike Raphael. Learning Raphael will also give you a keen familiarity with the standard properties of SVG objects, which will come in handy if you decide to give D3 a try later on.
One reason I like SVG graphics is that they are an extremely natural extension of HTML. A square in SVG is represented by a tag on the page, just like an image or a paragraph. You can style your shapes with CSS the same way you would anything else. This stands in contrast to the HTML5
<canvas> object, which introduces a new capability for drawing images in the browser. The
<canvas> is capable of more sophisticated computer graphics than SVG, but it is also more of a divergence in concept and coding strategy. I would use it for an involved in-browser video game or a heavy duty animation, but I would stick to SVG for everything else.
I thought you’d never ask! Just a few housekeeping notes:
While all of my examples with follow his guidelines, I do not care how you write your code. I get very frustrated when I see experienced programmers lecturing greenhorns on best practices when the newcomer has just begun learning a language or a new toolset. Conventions exist to help experienced developers stay organized and avoid errors, not to sap all the fun out of experimenting with a new skill set. So have at it, however you like.
As for how to follow along in this book, you’ll simply be loading a text file of commands—a web page—into a browser. Everything Raphael does is “client side,” meaning it runs on the user’s machine, not on a server somewhere. So you do not need an elaborate development environment, just a way to load your code into a browser. This can be as simple as editing a document with Notepad and loading it in a browser from your desktop, though you ought to do yourself a favor and get a text editor that recognizes code and highlights it in different colors for your viewing convenience. I recommend Notepad++ for PCs and TextWrangler for Mac. Or you can skip all of that and go to a site like jsFiddle or jsBin, both of which allow you to paste code into a window and see it come alive right there on the page. It doesn’t really matter, so long as the beautiful things you will create find their way to the screen.