4 ms·

Introduction to Raphaël JS

39 points by talabes 14y ago

I made this presentation to introduce this library in the easier way I can, hope that anyone interested like it and learn from it.

Cigano 14y ago
I don't know if the problem is only with me, but the link shows a blank page. Can someone confirm that?
- AlexeyBrin 14y ago
  Have you disabled JavaScript ? :) If you reenable JS in your browser you should be able to see the content of the page.
  - Cigano 14y ago
    Nope. JS is working. I'll see at home. Seems like something with the restrictions from company I work. Thanks.
lispilicious 14y ago
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 14y ago
  there is no jQuery dependency
talabes 14y ago
Thanks for the comments!
purephase 14y ago
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 14y ago
  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.
- bsenftner 14y ago
  Third'ed. After a careful study of the available cross-browser svg libraries a year and a half ago, I selected Raphael for a series of WebApps. Some associates chose others. Over time, they now all use Raphael. One of those decisions where I look back and think "got it right the first time!"
brechin 14y ago
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/ 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 14y ago
  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/ http://www.jasondavies.com/maps/transition/
  - brechin 14y ago
    The transitions are what really interest me about D3. It seems much better suited for that use-case. Thanks for the interesting link!
- erikdared 14y ago
  I used Raphael in the past and am just starting to learn D3 now. D3 seems to make it a lot easier to take a data set and represent it visually. It has lots of very useful helpers for scaling axes and such (even when the units are time). I know I've only really scratched the surface so far, but those are things that stand out the most. Raphael is still very capable, but it took me a lot more effort to create a graph than with D3. I think Raphael is better at general purpose drawing. Bottom line: D3 is best if you're taking data and want to represent it visually in a chart/graph. Raphael can do general-purpose drawing without explicitly needing any data to back it.
  - mlent 14y ago
    I have had the same experience. You have to DIY a lot if you want to create a graph or chart with Raphael, whereas D3 will just take your data and make one for you.
simoncion 14y ago
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-animation-slowdown-with-simple-infinite-animation http://stackoverflow.com/questions/15098456/raphael-gradual-...
talabes 14y ago
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-in-one-step.html http://devhike.blogspot.com/2013/02/convert-svg-to-raphael-i...). Perhaps its also useful. Enjoy!
- taf2 14y ago
  thanks this is very useful. i made this little video tutorial http://captico.com/animation-with-raphaeljs/2010/07 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!
eshvk 14y ago
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 14y ago
  Perhaps you can also take a look at my other post: http://devhike.blogspot.com.ar/2013/02/js-for-newbies.html http://devhike.blogspot.com.ar/2013/02/js-for-newbies.html If web development is what you want, javascript is a must.
csense 14y ago
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.

39 points by talabes 14y ago

I made this presentation to introduce this library in the easier way I can, hope that anyone interested like it and learn from it.

Cigano 14y ago

I don't know if the problem is only with me, but the link shows a blank page. Can someone confirm that?

AlexeyBrin 14y ago
Have you disabled JavaScript ? :) If you reenable JS in your browser you should be able to see the content of the page.
- Cigano 14y ago
  Nope. JS is working. I'll see at home. Seems like something with the restrictions from company I work. Thanks.

lispilicious 14y ago

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 14y ago
there is no jQuery dependency

talabes 14y ago

Thanks for the comments!

purephase 14y ago

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 14y ago
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.
bsenftner 14y ago
Third'ed. After a careful study of the available cross-browser svg libraries a year and a half ago, I selected Raphael for a series of WebApps. Some associates chose others. Over time, they now all use Raphael. One of those decisions where I look back and think "got it right the first time!"

brechin 14y ago

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/ 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 14y ago
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/ http://www.jasondavies.com/maps/transition/
- brechin 14y ago
  The transitions are what really interest me about D3. It seems much better suited for that use-case. Thanks for the interesting link!
erikdared 14y ago
I used Raphael in the past and am just starting to learn D3 now. D3 seems to make it a lot easier to take a data set and represent it visually. It has lots of very useful helpers for scaling axes and such (even when the units are time). I know I've only really scratched the surface so far, but those are things that stand out the most. Raphael is still very capable, but it took me a lot more effort to create a graph than with D3. I think Raphael is better at general purpose drawing. Bottom line: D3 is best if you're taking data and want to represent it visually in a chart/graph. Raphael can do general-purpose drawing without explicitly needing any data to back it.
- mlent 14y ago
  I have had the same experience. You have to DIY a lot if you want to create a graph or chart with Raphael, whereas D3 will just take your data and make one for you.

simoncion 14y ago

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-animation-slowdown-with-simple-infinite-animation http://stackoverflow.com/questions/15098456/raphael-gradual-...

talabes 14y ago

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-in-one-step.html http://devhike.blogspot.com/2013/02/convert-svg-to-raphael-i...). Perhaps its also useful. Enjoy!

taf2 14y ago
thanks this is very useful. i made this little video tutorial http://captico.com/animation-with-raphaeljs/2010/07 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!

eshvk 14y ago

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 14y ago
Perhaps you can also take a look at my other post: http://devhike.blogspot.com.ar/2013/02/js-for-newbies.html http://devhike.blogspot.com.ar/2013/02/js-for-newbies.html If web development is what you want, javascript is a must.

csense 14y ago

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.