D3.js vs Raphael.js

Question

I'm fascinated by both d3 and Raphael. I understand that Raphael is built on top of D3 and that it is cross-browser compatible, but I'm not sure which one is better suited for what scenarios. Can somebody please shed some light? My immediate use-case is potentially using the SIMILE timeline and integrating it with a state diagram (for which I intend to use d3/Raphael). Thanks!

Answer 1

Raphael is not built on D3.

Raphael will help you draw elements. D3 is more comprehensive and will help you bind data to elements. So I'd say D3 is more powerful. This forum discussion Discusses presenting a SIMILE timeline using D3, they refer to this project which implements a timeline in D3. So at first glance, D3 is your answer.

However, given that there doesn't seem to be a widget for D3 which handles the SIMILE timeline for you, either Raphael or D3 could be a good choice. That is, except for the fact that D3 doesn't work well with internet explorer's earlier versions, as explained in this article. So if you need to support earlier versions of IE, you're better off with Raphael.

Answer 2

D3 is much harder to learn than Raphael, but in both cases, you will also have to learn SVG to be able to create better animations. On the other hand normally D3 visualizations need less mathematics than the similar Processing or Raphael examples because there are many prepackaged layouts already.

I would say D3 is the better choice for an obvious reason: D3 is based on the current web standards stack (HTML, DOM - even if you hate it you need to use it, CSS, SVG, even Canvas), and is a library for working with data. Being a data framework, D3 also comes packed with:

• tons of algorithms and layouts (force layouts, stack layouts, trees, etc),
• some basic data wrangling functionality (nesting, cross, group by, rollups - see these examples: http://bl.ocks.org/phoebebright/raw/3176159/),
• jQuery style selections,
• and also visualization primitives (d3.svg comes with everything you need for simple graphics).

As it stands d3 is not just better than Raphael and Processing in many cases, but is also a viable replacement for jQuery, underscore.js and other frameworks. There are lots of charting libraries built on top of it, so you can always just drag and drop some cool chart and rewrite the data wrapper around it.

You can find some good timeline examples using this interface: http://biovisualize.github.com/d3visualization/#visualizationType=timeline