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

Both are different animals.

RaphaelJS simplify and expand the functions for vector graphics based on SVG and VML.

D3js just manipulate the DOM and rely on graphics standards (SVG and Canvas, on Bars graphs you can use DIVs too) to draw. For example d3.svg.symbol() return the content of the d parameter to pass it to the path element on the SVG, but don't draw the symbol by itself.

You can use D3js to manipulate the data and draw it with Raphael.

This blog explain how to combine D3js + Raphael. And check D3 for Raphael implementation too.

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

Answer 3

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 4

As a public sector consultant I've found that learning Raphael was a better investment for me since a lot of the time my clients use older versions of browsers. My current client uses IE7 exclusively which Raphael works with perfectly and D3 does not.

Personally I'd rather be using D3, but professionally that's not the reality of my situation.