Damian Dawber - Learning Raphael JS Vector Graphics [2013, PDF, ENG]

Chapter 1: The Graphical Web 5Vector drawing on the Web 6
Vector drawing libraries 7
The SVG specification 8
Working with Raphaël rather than SVG directly 9
Applications of Raphaël 9
Downloading Raphaël 10
Creating Raphaël JavaScript applications 11
Project structure and optimization 11
[*]Summary 11Chapter 2: Basic Drawing with Raphaël 13The drawing context 13
Canvas coordinates 15
Drawing basic shapes 16
Embedding images 18
Element attributes 18
Basic fills 19
Image fills 19
Applying strokes 20
Other attributes 21
href 21
opacity 22
clip-rect 22
Applying gradients 23
Linear gradients 23
Radial gradients 25
Grouping elements 27
Working with text 28
Embedding custom fonts 29
[*]Summary 30Chapter 3: Drawing PathsPath drawing concepts 32
Path drawing commands 33
The moveto command 34
The lineto commands 35
The closepath command 37
Drawing curves 38
Quadratic Bézier curves 38
Cubic Bézier curves 41
Drawing arcs 43
Utility methods for working with paths 46
Element.getTotalLength() 46
Element.getPointAtLength(length) 47
Element.getSubpath(from, to) 48
Catmull-Rom curves 49
[*]Summary 50Chapter 4: Transformations and Event Handling 51Basic transformations and event handling 52
Basic transformations 52
Translation 53
Rotation 53
Scaling 55
Basic event handling 55
Registering basic event handlers 55
Unregistering basic event handlers 57
Working with matrices 58
Transformation matrices 58
Using transformation matrices 58
The drag-and-drop functionality 60
The Element.drag() method 60
The onstart event handler 60
The onend event handler 60
The onmove event handler 60
Dragging by example 61
Dropping elements 62
Bounding box overlapping 62
Bounding box inside bounding box 63
[*]Summary 64Chapter 5: Vector Animation 65Basic animation 66
Animating paths 67
Animation easing 70
Built-in easing formulas 70
Custom easing using the cubic Bézier format 71
Animating transformations 72
Animation using custom attributes 73
Custom attributes 73
Animation along a path 76
Pausing and resuming animation 78
[*]Summary 79Chapter 6: Working with Existing SVGs 81Inkscape 82
Downloading Inkscape 82
Getting started with Inkscape 82
Inspecting paths 87
Inkscape's XML Editor 87
Taking paths from an existing SVG image 89
SVG to Raphaël conversion tools 90
Ready Set Raphaël 90
Other converters 91
Choropleth maps 92
Creating choropleth maps 92
Open source SVGs 96
[*]Summary 96Chapter 7: Creating a Suite of Social Media Visualizations 97Social network usage 97
Getting started 98
Using jQuery 99
Social network usage data 99
Drawing people icons 100
Responding to icon clicks 101
Drawing a key 102
Tweets by time 103
Getting started 104
Tweets by time data 104
The subtend custom attribute 105
The counts custom attribute 106
Updating the timer 106
The animate helper method 107
Iterating over our timers and starting the animation 108
Supplementary material 108
Facebook usage by year 108
Golden tweets 109
The future of Raphaël 110
Milestones 110
Long term goals 110
Summary 111
[*]Index 113