54

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!

Nick
  • 4,002
  • 4
  • 30
  • 41

4 Answers4

46

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.

Jodes
  • 14,118
  • 26
  • 97
  • 156
27

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

paxRoman
  • 2,064
  • 3
  • 19
  • 32
  • 2
    Just to be clear here, d3 cannot be a replacement for jquery because d3 makes no claim on browser compatibility whereas jquery owns the compatibility layer role. – Core Mar 11 '15 at 19:34
  • You are obviously right, but that depends on what the managers/developers of a certain product decide to do. If they're not interested in browser compatibility than it's easy to consider d3 also a jQuery, underscore or other tool replacement. – paxRoman Mar 12 '15 at 08:56
17

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.

Carl Manaster
  • 39,912
  • 17
  • 102
  • 155
jkutianski
  • 580
  • 6
  • 16
10

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.

Jared
  • 878
  • 3
  • 11
  • 19