RaphaelJS

RaphaelJS

by Chris Wilson
Released December 2013
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449365325

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Create beautiful, interactive images on the Web with RaphaëlJS, the JavaScript library that lets you draw Scalable Vector Graphics (SVG) right in the browser. With this concise guide, you’ll quickly learn how to paint the screen with shapes and colors that you can turn into lively, animated graphics and visualizations.

Author Chris Wilson (Time.com) shows you how to create Raphaël objects and manipulate them with animation, transformations, and other techniques, using just a few lines of code. Packed with working examples, sample code, and cool hands-on projects, RaphaëlJS is ideal for new and experienced JavaScript programmers alike.

  • Create images that work on browsers new and old, as well as mobile devices
  • Start with the basics—shapes, colors, transformations, sets, and text
  • Learn how to build custom curves and shapes with paths
  • Code animations that move through space, follow paths, or change direction
  • Make your artwork come alive through user interaction
  • Bind a dataset to a collection of visual objects—the basis of data visualization
  • Learn techniques to make your detailed visuals stand out on screens of any size

Publisher resources

Download Example Code

Table of contents

  1. Preface
    1. Conventions Used in This Book
    2. Using Code Examples
    3. Safari® Books Online
    4. How to Contact Us
    5. Acknowledgments
  2. 1. Introduction: Why Raphael is Great
    1. Inside Every Browser, an Artist
    2. Why Raphael?
    3. What About D3.js? I’ve Heard It’s Better for Web Visualizations
    4. I’m Convinced. Let’s Get Started.
  3. 2. Shapes
    1. Getting Raphael
    2. Initializing Raphael
    3. Drawing Things
    4. Basic Shapes
    5. Images
    6. Text
    7. Attributes
    8. Transformations
    9. Sets
    10. Case Study: Let’s Make a Braille Generator
      1. The Data
      2. The Fun Part
      3. Reflections
    11. Final Thoughts: Seeing Things
  4. 3. Interaction
    1. Raphael Events: The Basics
    2. Removing Events
    3. Events and Sets
      1. Drag Events
      2. Better Dragging
      3. Dragging Sets
    4. Case Study: Let’s Play Dominoes
    5. Final Thoughts
  5. 4. Paths: How to Make Custom Shapes and Curves
    1. Syntax
      1. Dressing Up Your Paths
      2. Relative paths
    2. Hopping Around
      1. Polygons
    3. Curves
      1. The A Command: Elliptical Curves
    4. The C Command: Cubic Bézier Curves
    5. Exotic Paths
    6. Case Study: Play Ball!
    7. Final Thoughts
  6. 5. Animations, Part One
    1. The Basics
      1. Getting There is Half the Fun
      2. Being There is the Other Half of the Fun
    2. Animating Paths
    3. Piecewise Animations
    4. Case Study: Metronome
      1. Wait, Aren’t You Forgeting Something?
    5. Final Thoughts
  7. 6. Maps, Illustrations, and Other Artifacts
    1. Maps
      1. Importing SVGs Found in Nature
      2. Manipulating SVGs Found in Nature
      3. Adding Information
    2. Interlude: Raphael vs. D3
    3. Case Study: Paint by Numbers
  8. 7. Animations, Part Two
    1. Extending Raphael
      1. Adding Functions
      2. Adding Attributes
      3. Adding Methods
    2. Animating Along a Path
    3. Pause for Commentary
    4. Custom Easing Formulas
    5. Code Example: The Animated Solar System
  9. 8. Mobile, Global Variables, and Other Things That Hurt Less Than You Think
    1. Measuring the Container
    2. Raphael in Every Context
      1. Stealth Raphael
    3. Raphael Plus Require.js, Browserify, or Another AMD Framework
      1. RequireJS
      2. Browserify
    4. Final Thoughts: The Future of Raphael and You
  10. Colophon
  11. Copyright

Product information

  • Title: RaphaelJS
  • Author(s): Chris Wilson
  • Release date: December 2013
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449365325