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

Answer 1

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