Learning Raphaël JS Vector Graphics

Learning Raphaël JS Vector Graphics
eBook: $14.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $44.98    Print cover: $29.99
save 33%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • 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

Book Details

Language : English
Paperback : 130 pages [ 235mm x 191mm ]
Release Date : May 2013
ISBN : 1782169164
ISBN 13 : 9781782169161
Author(s) : Damian Dawber
Topics and Technologies : All Books, Big Data and Business Intelligence, Open Source

Table of Contents

Chapter 1: The Graphical Web
Chapter 2: Basic Drawing with Raphaël
Chapter 3: Drawing Paths
Chapter 4: Transformations and Event Handling
Chapter 5: Vector Animation
Chapter 6: Working with Existing SVGs
Chapter 7: Creating a Suite of Social Media Visualizations
  • Chapter 1: The Graphical Web
    • Vector drawing on the Web
      • Vector drawing libraries
    • The SVG specification
      • Working with Raphaël rather than SVG directly
    • Applications of Raphaël
    • Downloading Raphaël
    • Creating Raphaël JavaScript applications
      • Project structure and optimization
    • Summary
    • Chapter 2: Basic Drawing with Raphaël
      • The drawing context
        • Canvas coordinates
      • Drawing basic shapes
      • Embedding images
      • Element attributes
        • Basic fills
        • Image fills
        • Applying strokes
        • Other attributes
          • href
          • opacity
          • clip-rect
        • Applying gradients
          • Linear gradients
          • Radial gradients
        • Grouping elements
      • Working with text
        • Embedding custom fonts
      • Summary
      • Chapter 3: Drawing Paths
        • Path drawing concepts
        • Path drawing commands
          • The moveto command
          • The lineto commands
          • The closepath command
        • Drawing curves
          • Quadratic Bézier curves
          • Cubic Bézier curves
          • Drawing arcs
        • Utility methods for working with paths
          • Element.getTotalLength()
          • Element.getPointAtLength(length)
          • Element.getSubpath(from, to)
          • Catmull-Rom curves
        • Summary
        • Chapter 4: Transformations and Event Handling
          • Basic transformations and event handling
            • Basic transformations
              • Translation
              • Rotation
              • Scaling
            • Basic event handling
              • Registering basic event handlers
              • Unregistering basic event handlers
          • Working with matrices
            • Transformation matrices
              • Using transformation matrices
          • The drag-and-drop functionality
            • The Element.drag() method
            • The onstart event handler
            • The onend event handler
            • The onmove event handler
              • Dragging by example
            • Dropping elements
              • Bounding box overlapping
              • Bounding box inside bounding box
          • Summary
          • Animating paths
          • Animation easing
            • Built-in easing formulas
            • Custom easing using the cubic Bézier format
          • Animating transformations
          • Animation using custom attributes
            • Custom attributes
            • Animation along a path
              • Pausing and resuming animation
          • Summary
            • Chapter 6: Working with Existing SVGs
              • Inkscape
                • Downloading Inkscape
                • Getting started with Inkscape
              • Inspecting paths
                • Inkscape's XML Editor
                • Taking paths from an existing SVG image
              • SVG to Raphaël conversion tools
                • Ready Set Raphaël
                • Other converters
              • Choropleth maps
                • Creating choropleth maps
              • Open source SVGs
              • Summary
              • Chapter 7: Creating a Suite of Social Media Visualizations
                • Social network usage
                  • Getting started
                  • Using jQuery
                  • Social network usage data
                  • Drawing people icons
                  • Responding to icon clicks
                  • Drawing a key
                • Tweets by time
                  • Getting started
                  • Tweets by time data
                  • The subtend custom attribute
                  • The counts custom attribute
                  • Updating the timer
                  • The animate helper method
                  • Iterating over our timers and starting the animation
                • Supplementary material
                  • Facebook usage by year
                  • Golden tweets
                • The future of Raphaël
                  • Milestones
                  • Long term goals
                • Summary

                Damian Dawber

                Damian Dawber is a web developer working on medium- to large-scale e-commerce websites and bespoke web and mobile applications. He works with both frontend and server-side technologies having had exposure to a wide range of projects working on behalf of small and medium enterprises through to FTSE 100 companies. He started his career after being exposed to programming as it used to solve problems in physics and decided he wanted to write code on a daily basis thereafter.
                Sorry, we don't have any reviews for this title yet.

                Code Downloads

                Download the code and support files for this book.

                Submit Errata

                Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

                Sample chapters

                You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                Frequently bought together

                Learning Raphaël JS Vector Graphics +    Microsoft System Center Configuration Manager =
                50% Off
                the second eBook
                Price for both: £17.75

                Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                What you will learn from this book

                • Learn how to work with existing SVGs to create complex vectors
                • Become familiar with the SVG specification for creating complex drawings and the Raphaël JavaScript library
                • Get to grips with how to create complex vector drawings using paths
                • Add user interactivity to your applications
                • Learn how to apply transformations to vector graphics
                • Create stunning animations to bring your vector drawings to life

                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.


                A step-by-step guide to understanding the principles underlying vector drawing, using illustrations and code demos along with interactive maps to fully exploit the JavaScript library to create a data visualization widget.

                Who this book is for

                Learning Raphaël JS Vector Graphics has been written for anyone with an interest in frontend browser technologies with little or no knowledge of vector graphics drawing. Designers, integrators, frontend developers, and data visualization developers will get something out of reading this book. The book assumes knowledge of HTML and CSS and a working familiarity with JavaScript.

                Code Download and Errata
                Packt Anytime, Anywhere
                Register Books
                Print Upgrades
                eBook Downloads
                Video Support
                Contact Us
                Awards Voting Nominations Previous Winners
                Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software