Chris Wilson
RaphaelJS
Graphics and Visualization on the Web
RaphaelJS
by Chris Wilson
Copyright © 2014 Chris Wilson. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/
institutional sales department: 800-998-9938 or corporate@oreilly.com.
Editors: Simon St. Laurent and Allyson MacDonald
Production Editor: Nicole Shelby
Cover Designer: Randy Comer
Interior Designer: David Futato
Illustrator: Rebecca Demarest
December 2013: First Edition
Revision History for the First Edition:
2013-12-09: First release
See http://oreilly.com/catalog/errata.csp?isbn=9781449365363 for release details.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly
Media, Inc. RaphaelJS, the picture of a Nile Valley Sunbird, and related trade dress are trademarks of O’Reilly
Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trade‐
mark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume no
responsibility for errors or omissions, or for damages resulting from the use of the information contained
herein.
ISBN: 978-1-449-36536-3
[LSI]
Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
1.
Introduction: Why Raphael is Great. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Inside Every Browser, an Artist 3
Why Raphael? 3
What About D3.js? I’ve Heard It’s Better for Web Visualizations 4
I’m Convinced. Let’s Get Started. 5
2.
Shapes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Getting Raphael 8
Initializing Raphael 8
Drawing Things 9
Basic Shapes 10
Images 11
Text 12
Attributes 13
Transformations 14
Sets 16
Case Study: Let’s Make a Braille Generator 20
The Data 21
The Fun Part 22
Reflections 25
Final Thoughts: Seeing Things 26
3.
Interaction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Raphael Events: The Basics 30
Removing Events 31
Events and Sets 33
Drag Events 35
iii
