This is the Raphaël talk that I gave to RubyNation on April 1, 2011.

1. RAPHAËL AND YOU
Trotter Cashion
RubyNation 2011

2. THIS IS ON THE INTERNET!
•Slideshare - http://www.slideshare.net/trotter/raphal-rubynation
•My Bloggy Blog - http://trottercashion.com

3. IT’S ME!

4. CO-FOUNDER
http://mashion.net

5. @CASHION
http://www.charlesheflin.com/wp-content/uploads/2010/06/fail-whale.jpg

6. github.com/trotter
http://gems.github.com/octocat.png

8. RAPHAËL’S DAD
http://dmitry.baranovskiy.com/
http://www.flickr.com/photos/lachlanhardy/435025107/in/photostream/

9. COMES FROM A LAND DOWN UNDER
http://images.coveralia.com/audio/m/Men_At_Work-Super_Hits-Frontal.jpg

10. SENCHA
http://www.blackbambu.com/wp-content/uploads/2011/02/sencha-logo.png

11. “RAPHAËL IS A SMALL JAVASCRIPT
LIBRARY THAT SHOULD SIMPLIFY
YOUR WORK WITH VECTOR
GRAPHICS ON THE WEB.”
http://raphaeljs.com/

12. “SCALABLE VECTOR GRAPHICS
(SVG) IS A FAMILY OF
SPECIFICATIONS OF AN XML-BASED
FILE FORMAT FOR DESCRIBING TWO-
DIMENSIONAL VECTOR GRAPHICS,
BOTH STATIC AND DYNAMIC.”
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

13. “VECTOR MARKUP LANGUAGE
(VML) IS A DEPRECATED XML
LANGUAGE USED TO PRODUCE
VECTOR GRAPHICS.”
http://en.wikipedia.org/wiki/VML

14. VECTOR GRAPHICS
SVG VML
Throws never ending
deprecation parties.

15. SMALL - 60KB*
120
90
60
30
0
Socket.IO Raphaël jQuery YUI
* 20Kb with GZIP

16. SIMPLE
r = Raphael("somediv", 100, 100);
rect = r.rect(20, 20, 50, 50);
setInterval(function () {
rect.rotate(1);
}, 10);

17. THE COMPETITION
The Canvas Part

18. FOR YOUR MANAGER
Raphaël Canvas Flash
Tiny Download x x
Fast x x ?
Open x x
All Browsers x x
Mobile ? x
Shapes x x

19. Everything is a
node and can
be treated like
a normal DOM
element.
http://www.comicvsaudience.net/images/dom.jpg

20. Yes... this means binding with
jQuery is fair game.

21. RAPHAËL
EXAMPLE TIME!
http://fc07.deviantart.net/fs71/f/2010/363/4/e/peanut_butter_jelly_time_8dddd_by_mariomario54321-d35zla9.png

22. NEW YORK TIMES

23. RECTANGLES, HOW DO THEY WORK?
r = Raphael("jobs-graph", 640, 120);
rect = r.rect(481, 30, 7, 90);
rect.attr({stroke: "none",
fill: "#446093"});
This one

24. TEXT, HOW DO THEY WORK?
r = Raphael("jobs-graph", 640, 140);
text = r.text(490, 130, "CLINTON");
text.attr({font: "8px Courier",
fill: "#9c9c9b"});
Hi Bill!

25. THE INVISIBLE HOVER
hover = r.rect(481, 0, 8, 120);
hover.attr({stroke: "none",
"fill": "#fff",
"fill-opacity": 0});
$(hover.node).hover(function () {
rect.attr({"stroke": "#000"});
}, function () {
rect.attr({"stroke": "none"});
});
Only the black line for now

26. EXPECT A BLOG POST ON
CALLOUTS
http://trottercashion.com
The Callout

27. WALL STREET JOURNAL

28. STATES ARE PATHS
r = Raphael("usa", 637, 432);
path = r.path(
"M352,226L401,224L403,227L399,232L407,231L408,233L40
4,235L406,236L405,237L405,238L404,238L404,240L403,23
9L402,240L403,240L402,242L404,244L401,246L401,248L39
9,248L400,250L399,249L398,250L399,251L398,251L398,25
5L397,256L396,256L395,258L394,257L396,259L394,259L39
5,260L394,262L393,261L394,264L392,265L394,266L391,26
6L392,267L391,267L391,269L393,269L392,270L393,269L39
2,270L393,272L394,271L393,273L392,274L392,275L358,27
6L358,269L354,269L353,268L353,242L350,226L352,226Z"
);
path.attr({fill: "#3081c2",
stroke: "#828282"});

29. STATES ARE PATHS
r = Raphael("usa", 637, 432);
path = r.path(
"M352,226 L401,224 L403,227 Z"
);
path.attr({fill: "#3081c2",
stroke: "#828282"});
I grew up here!

30. MAKE IT BIGGER!*
path.animate({scale: [2, 2]},
1000);
*WSJ actually does much more crazy than this

31. NISSAN

32. IMAGES, HOW DO THEY WORK?
r = Raphael("nissan", 1264, 568);
r.image(
"/images/learn/nodes/6/6i1.png",
672,
301,
48,
48
);
This one

33. THE IMAGE FROM BEFORE...
circle.attr({
fill: "270-#58a0ff-#5fe2fe",
stroke: "none"
});
This could have
been a circle!

34. CIRCLES, HOW DO THEY WORK?
circle = r.circle(213, 244, 5);
circle.attr({stroke: "#a2c9e3",
"stroke-width": 4,
"stroke-opacity": 0.6});
Transparency
for teh win!

35. HOW DO WE FIX THE LINE?
rad =30 * Math.PI / 180;
startX =Math.cos(rad) * 7 + 213;
startY =Math.sin(rad) * 7 + 244;
path =["M", startX, startY,
"l 300,100"];
r.path(path);
Transparency
reveals we lose!

36. WHIPLASH!*
circle.click(function () {
circle.animate({cx: 513,
cy: 344},
1000,
"elastic");
});
*Nissan actually swaps the circle out for an
animated gif, which is then animated w/ Raphaël.

37. RAPHAËL LINKS
•Raphaël - http://raphaeljs.com
•Testing - http://bit.ly/raphael-testing
•More this month... - http://trottercashion.com

38. EXAMPLE SITES
•New York Times - http://nyti.ms/eoxtC6
•Wall Street Journal - http://on.wsj.com/hMsmqW
•Nissan - http://bit.ly/fJ2zPb

39. THANK YOU!