

Introduction to Raphaël JS - talabes
http://devhike.blogspot.com.ar/2013/03/introduction-to-raphael.html
I made this presentation to introduce this library in the easier way I can, hope that anyone interested like it and learn from it.
======
brechin
I learned about RaphaelJS recently and used it (along with some jQuery code)
to make a very interactive county-by-county map of data our company is
interested in displaying for marketing purposes.

I've heard about D3 (<http://d3js.org/>), but haven't had a chance to use it
in my work yet. Can anyone offer comparisons with its SVG rendering
performance & capabilities?

~~~
oscilloscope
D3 just exposes SVG directly to you. But with county maps specifically, you
can compress and simplify the data with TopoJSON and use d3.geo to render it.
d3.geo even has a canvas renderer and many projections to choose from. And
since it's d3, you can do data-driven transitions between different datasets
and projections.

I bet you haven't seen anything like this in Raphael.

<http://www.jasondavies.com/maps/transition/>

~~~
brechin
The transitions are what really interest me about D3. It seems much better
suited for that use-case. Thanks for the interesting link!

------
talabes
Guys, one of the common use cases involve converting an svg to a raphael
elements before using them, I also made a post of how to do this
([http://devhike.blogspot.com/2013/02/convert-svg-to-
raphael-i...](http://devhike.blogspot.com/2013/02/convert-svg-to-raphael-in-
one-step.html)).

Perhaps its also useful. Enjoy!

~~~
taf2
thanks this is very useful. i made this little video tutorial
<http://captico.com/animation-with-raphaeljs/2010/07> showing how to take an
illustrator exported svg and animate the paths... i think having your rappar
will make the whole process of building animations much easier... thanks!

------
csense
Why do you put the two dots over the 'e'? Don't you know that this is the kind
of unnecessary flooflaw that breaks things?

A few years ago I downloaded a tarball of Java source code from somewhere. The
author's name in a comment had a vowel with two dots over it, and that was the
only non-ASCII character in the files. I _could not_ get those files to
compile at all! I was using official JDK and everything. Finally I did a mass
search-and-replace to get rid of the funny character and they compiled fine.

Non-ASCII characters in filenames are just as bad as spaces. Why, back in my
day, we got by with eight and three! And we didn't even have directories until
DOS 2.0! Now get off my lawn.

------
simoncion
While we're talking about this, does anyone know what might be causing this
slowdown that my buddy is running in to when using Raphael to run an
infinitely repeating animation?

Details are at this stackoverflow question:
[http://stackoverflow.com/questions/15098456/raphael-
gradual-...](http://stackoverflow.com/questions/15098456/raphael-gradual-
animation-slowdown-with-simple-infinite-animation)

------
eshvk
This is sort of off topic so apologies in advance. I am a data scientist who
wants to get into designing visualizations on the web. Is there a 101 of where
to start? I have not done much on the lines of web development so I don't
really know if spending a few months learning say Javascript is what I should
do?

~~~
talabes
Perhaps you can also take a look at my other post:
<http://devhike.blogspot.com.ar/2013/02/js-for-newbies.html>

If web development is what you want, javascript is a must.

------
purephase
I really, really like Raphael. I was in a position to try out Easel, Fabric
and Raphael and while is was my personal favorite, our needs to stay close to
AS3 (to port flash) meant we went with Easel.

Raphael is a very nice library though.

~~~
aviswanathan
I totally second this. The learning curve for Raphael is so much less steep
than D3 and there's some really nice functionality built into the framework.
The only (small) qualm I have is that it's a relatively bulky package, but you
definitely can cut out pieces that you don't use that are unnecessary.

------
lispilicious
I really like this tutorial, a concise number of slides which (excuse me)
paint a broad picture.

AFAICT there is no jQuery dependency, or am I mistaken?

~~~
sosuke
there is no jQuery dependency

------
Cigano
I don't know if the problem is only with me, but the link shows a blank page.

Can someone confirm that?

~~~
AlexeyBrin
Have you disabled JavaScript ? :)

If you reenable JS in your browser you should be able to see the content of
the page.

~~~
Cigano
Nope. JS is working.

I'll see at home. Seems like something with the restrictions from company I
work.

Thanks.

------
talabes
Thanks for the comments!

