Learning Raphaël JS Vector Graphics -- Table of Contents -- Learning Raphaël JS Vector Graphics -- Credits -- About the Author -- About the Reviewers -- www.PacktPub.com -- Support files, eBooks, discount offers and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- What this book covers -- Who this book is for -- Conventions -- Reader feedback -- Customer support -- Downloading the example code -- Downloading the color images of this book -- Errata -- Piracy -- Questions -- 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 -- 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 -- 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 -- 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 -- Using transformation matrices to perform shear -- 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 -- 5. Vector Animation -- Basic animation -- 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 -- 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 -- 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 -- Index.