RaphaelJS: Graphics and Visualization on the Web (2014)
Chapter 1. Introduction: Why Raphael is Great
Raphael is a toolkit for making beautiful things on the Web. With a few lines of code and the help of a small, free JavaScript library, you can turn the browser into a living gallery of interactive artwork and visualization. This book will teach you how to bridge the gulf between the page and your imagination.
Let’s dive straight into a complete working example.
<!DOCTYPE html>
<html>
<head>
<title>Red dot</title>
</head>
<body>
<div id="container"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script>
var paper = Raphael("container", 500, 300);
var dot = paper.circle(250, 150, 100).attr({
fill: "#FF0000",
stroke: "#000099",
"stroke-width": 3
});
</script>
</body>
</html>
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:
§ We took a bare bones HTML page and added a single <div> element with the id container.
§ We loaded a small JavaScript library named raphael-min.js, which clocks in at 89Kb, hosted on CloudFlare.
§ We wrote two lines of JavaScript: one that initializes Raphael, and a second that gives the command to make a dot at the coordinates 250, 150 with a radius of 100 pixels. Then we made the dot red with a blue border (or stroke) 3 pixels in width.
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.
Inside Every Browser, an Artist
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.
To accomplish this, you enlist the services of the three-headed deity of the Internet: HTML, CSS and JavaScript. I like to think of this troika as the body, clothing, and personality of the Web: HTML (HyperText Markup Language) creates things—boxes, paragraphs, tables, buttons—CSS (cascading style sheets) controls the appearance of these things—color, font, positioning—and JavaScript controls their behavior—what happens when the user clicks on this or mouses over that.
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.
Why Raphael?
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:
It’s easy
Raphael is written entirely in JavaScript, the native language of the Web. JavaScript is a glorious language whose supreme friendliness to inexperienced developers more than compensates for a few design flaws. If you’re new to the world of Web development, Raphael is an excellent place to start because you will immediately be able to see the fruits of your efforts right there on the screen. If you have experience with any aspect of webpage design, Raphael will make immediate, intuitive sense. Unlike many (worthy) HTML5 technologies, it will not require rewiring your mind or learning an entirely different approach to design.
It’s popular
You shouldn’t use Raphael just because everyone else is, but it’s nice to know you’re not alone. Every day, I see new questions about Raphael on the indespensible forum Stack Overflow, where coders pose and answer each other’s questions. Almost every one is answered satisfactorily within hours (sometimes by me). Like all good JavaScript libraries, it’s open-source, meaning veteran users can sift through the source code to resolve even the knottiest problems.
It works
Under the hood, as they say, Raphael uses a format known as Scalable Vector Graphics (SVG), the browser’s built-in graphics language. For older versions of Internet Explorer that do not speak SVG, it “falls back” on a similar format known as Vector Markup Language (VML). By contrast, popular visualization tools like D3JS and ProcessingJS do not work on older browsers. At the time of this writing, just under 15% of users worldwide have a version of Internet Explorer earlier than IE9, meaning they would see a blank screen if you use one of those tools. That number will be higher or lower depending on the demographics of your audience, and it will continue to recede worldwide each year, but the added compatibility is a nice check mark in Raphael’s column.
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.
What About D3.js? I’ve Heard It’s Better for Web Visualizations
D3, which stands for “data-driven documents,” is a fantastic JavaScript library written by Mike Bostock, one of the leading visionaries in browser-based data visualization. As its name suggests, it specializes in quickly translating raw datasets into visualizations, from Microsoft Excel-style charts and graphs to social network diagrams and sunburst diagrams. If your goal is to make interactive charts and graphs based on large datasets, and if you’re already a confident JavaScript programmer, D3 might be the right place to start.
But there’s a reason I’m writing a book about Raphael and not D3—besides the fact that O’Reilly already has a book on D3. Data visualization is a small subset of the sort of imaginative visuals that JavaScript and SVG are capable of.
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’m Convinced. Let’s Get Started.
I thought you’d never ask! Just a few housekeeping notes:
Like any good JavaScript developer, I follow the sage advice of Douglas Crockford, a longtime evangelist for the language and author of the indispensible JavaScript: The Good Parts, a book I promise I would recommend even if I weren’t writing this book for the same publisher. JavaScript is flexible enough that there are usually many ways to accomplish the same task, and Crockford has very good ideas about which approach to take.
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.