D3.js vs Raphael.js

Question

I am fascinated by both d3 and Raphael. I understand that Raphael is built on top of D3 and cross-browser compatible , but I'm not sure which one is best suited for which scenario. Can anyone shed some light? My immediate use case potentially uses the SIMILE timeline and integrates it with a state diagram (for which I intend to use d3 / Raphael). Thank!

Answer 1

Raphael is not built on D3.

Raphael will help you draw the elements. D3 is more comprehensive and helps you bind data to items. Therefore, I would say that D3 is more powerful. Discussion of this forum Discusses the presentation of the SIMILE timeline using D3, they refer to this project , which implements the timeline in D3. So, at first glance, D3 is your answer.

However, given that D3 doesn't seem to use a widget that handles the SIMILE timeline for you, Raphael or D3 might be a good choice. That is, except for the fact that D3 does not work with previous versions of Internet Explorer, as described 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 need to learn SVG to be able to create better animations. On the other hand, it usually takes less math to visualize D3 than similar examples of processing or Raphael, since there are already many packaged layouts.

I would say that D3 is the best 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 this is a library to work with data. Being a data structure, D3 also comes with:

• tons of algorithms and layouts (power layouts, stack layouts, trees, etc.),
• some basic functions of enumerating data (nesting, cross, group, drives - see the following examples: http://bl.ocks.org/phoebebright/raw/3176159/ ),
• JQuery style selection,
• as well as visualization primitives (d3.svg comes with everything you need for simple graphics).

Thirdly, d3 is not only better than Raphael and Processing in many cases, but also a viable replacement for jQuery, underscore.js and other frameworks. A lot of graphic libraries are built on it, so you can always simply drag and drop a cool diagram and rewrite the data wrapper around it.

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

Answer 3

Both are different animals.

RaphaelJS simplifies and extends the features of vector graphics based on SVG and VML.

D3js just manipulate the DOM and rely on graphic standards (SVG and Canvas, you can also use the DIV on Bars charts) to draw. For example, d3.svg.symbol() returns the contents of the d parameter to pass it to the path element in SVG, but does not draw the character itself.

You can use D3js to manage data and draw it using Raphael .

This blog explains how to combine D3js + Raphael . And check out the D3 for Raphael .

Answer 4

As a public sector consultant, I found that Raphael training was more profitable for me, as many clients use older versions of browsers. My current client uses IE7 exclusively, with which Rafael works fine, but D3 does not.

Personally, I would prefer to use D3, but professionally this is not the reality of my situation.