You are previewing Learning Raphaël JS Vector Graphics.
O'Reilly logo
Learning Raphaël JS Vector Graphics

Book Description

Over 70 code examples to create vector graphics and data visualizations!

  • Create impressive vector graphics and data visualizations in your browser

  • Add animation and interactivity to your web applications

  • Work with native SVGs to create complex vector graphics

  • Develop cross-browser vector graphics solutions

In Detail

Raphaël is an exceptional library that makes drawing vector graphics in the browser straightforward. It boasts a large number of methods that facilitate drawing and animating graphics, allowing developers to create flexible, interactive web applications and data visualizations.

Learning Raphaël JS Vector Graphics takes you from being a complete vector graphics novice to an accomplished vector graphics developer. Packed with illustrations and code demos, this book covers a wide array of concepts and takes you through them by example. The Raphaël library is covered in detail and in the context of its real-world applicability.

This book looks at the powerful vector graphics drawing library, Raphaël, and how you can utilize it to draw vector graphics and create interactive web applications with ease.

You will learn how to draw complex vector graphics and how to transform, animate, and interact with them. We will also look at working with existing vector graphics to add an extra layer of complexity to our applications, and finish up by creating a series of data visualization demos. If you want to learn how to create appealing, interactive graphics and data visualizations, then this is the book for you.

Learning Raphaël JS Vector Graphics is packed full of illustrations and has over 70 demos to really hammer home the concepts covered.

Table of Contents

  1. Learning Raphaël JS Vector Graphics
    1. Table of Contents
    2. Learning Raphaël JS Vector Graphics
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. Who this book is for
      3. Conventions
      4. Reader feedback
      5. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. The Graphical Web
      1. Vector drawing on the Web
        1. Vector drawing libraries
      2. The SVG specification
        1. Working with Raphaël rather than SVG directly
      3. Applications of Raphaël
      4. Downloading Raphaël
      5. Creating Raphaël JavaScript applications
        1. Project structure and optimization
      6. Summary
    9. 2. Basic Drawing with Raphaël
      1. The drawing context
        1. Canvas coordinates
      2. Drawing basic shapes
      3. Embedding images
      4. Element attributes
        1. Basic fills
        2. Image fills
        3. Applying strokes
        4. Other attributes
          1. href
          2. opacity
          3. clip-rect
        5. Applying gradients
          1. Linear gradients
          2. Radial gradients
        6. Grouping elements
      5. Working with text
        1. Embedding custom fonts
      6. Summary
    10. 3. Drawing Paths
      1. Path drawing concepts
      2. Path drawing commands
        1. The moveto command
        2. The lineto commands
        3. The closepath command
      3. Drawing curves
        1. Quadratic Bézier curves
        2. Cubic Bézier curves
        3. Drawing arcs
      4. Utility methods for working with paths
        1. Element.getTotalLength()
        2. Element.getPointAtLength(length)
        3. Element.getSubpath(from, to)
        4. Catmull-Rom curves
      5. Summary
    11. 4. Transformations and Event Handling
      1. Basic transformations and event handling
        1. Basic transformations
          1. Translation
          2. Rotation
          3. Scaling
        2. Basic event handling
          1. Registering basic event handlers
          2. Unregistering basic event handlers
      2. Working with matrices
        1. Transformation matrices
          1. Using transformation matrices
            1. Using transformation matrices to perform shear
      3. The drag-and-drop functionality
        1. The Element.drag() method
        2. The onstart event handler
        3. The onend event handler
        4. The onmove event handler
          1. Dragging by example
        5. Dropping elements
          1. Bounding box overlapping
          2. Bounding box inside bounding box
      4. Summary
    12. 5. Vector Animation
      1. Basic animation
      2. Animating paths
      3. Animation easing
        1. Built-in easing formulas
        2. Custom easing using the cubic Bézier format
      4. Animating transformations
      5. Animation using custom attributes
        1. Custom attributes
        2. Animation along a path
          1. Pausing and resuming animation
      6. Summary
    13. 6. Working with Existing SVGs
      1. Inkscape
        1. Downloading Inkscape
        2. Getting started with Inkscape
      2. Inspecting paths
        1. Inkscape's XML Editor
        2. Taking paths from an existing SVG image
      3. SVG to Raphaël conversion tools
        1. Ready Set Raphaël
        2. Other converters
      4. Choropleth maps
        1. Creating choropleth maps
      5. Open source SVGs
      6. Summary
    14. 7. Creating a Suite of Social Media Visualizations
      1. Social network usage
        1. Getting started
        2. Using jQuery
        3. Social network usage data
        4. Drawing people icons
        5. Responding to icon clicks
        6. Drawing a key
      2. Tweets by time
        1. Getting started
        2. Tweets by time data
        3. The subtend custom attribute
        4. The counts custom attribute
        5. Updating the timer
        6. The animate helper method
        7. Iterating over our timers and starting the animation
      3. Supplementary material
        1. Facebook usage by year
        2. Golden tweets
      4. The future of Raphaël
        1. Milestones
        2. Long term goals
      5. Summary
    15. Index