Introduction to Raphaël JS | Hacker News Reader

Introduction to Raphaël JS

devhike.blogspot.com.ar

39 pointstalabes20 comments

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

Open articleView on HN

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?

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/

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

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.

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.

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...).

Perhaps its also useful. Enjoy!

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!

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.

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-...

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?

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.

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.

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.

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!"

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?

there is no jQuery dependency

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

Can someone confirm that?

Have you disabled JavaScript ? :)

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

Nope. JS is working.

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

Thanks.

Thanks for the comments!

Reply on news.ycombinator.com