What is the difference between D3 and jQuery?

• D3 is data-driven but jQuery is not: with jQuery you directly manipulate elements, but with D3 you provide data and callbacks through D3's unique data(), enter() and exit() methods and D3 manipulates elements.

• D3 is usually used for data visualization but jQuery is used for creating web apps. D3 has many data visualization extensions and jQuery has many web app plugins.

• Both are JavaScript DOM manipulation libraries, have CSS selectors and fluent API and are based on web standards which makes them look similar.

Following code is an example of D3 usage which is not possible with jQuery (try it in jsfiddle):

  // create selection  var selection = d3.select('body').selectAll('div');  // create binding between selection and data  var binding = selection.data([50, 100, 150]);  // update existing nodes  binding    .style('width', function(d) { return d + 'px'; });  // create nodes for new data  binding.enter()    .append('div')    .style('width', function(d) { return d + 'px'; });  // remove nodes for discarded data  binding.exit()    .remove();

d3 has a silly description. jQuery and d3 are not at all similar, you just don't use them for the same things.

jQuery's purpose is to do general dom manipulation. It's a general purpose javascript toolkit for anything you might want to do.

d3 was primarily designed to make it easy to make shiny graphs with data. You should definitely use it (or something similar, or something built on top of it) if you want to make graphical visualizations of data.

If you want a general purpose JS library for all your interactive form needs, consider jQuery or proto or mootools. If you want something tiny, consider underscore.js. If you want something with dependency injection and testability, consider AngularJS.

A General comparison guide from wikipedia.

I can see why someone would think they are similar. They use a similar selector syntax -- $('SELECTOR'), and d3 is an extremely powerful tool for selecting, filtering, and operating on html elements, especially while chaining these operations together. d3 tries to explain this to you on its home page by claiming to be a general purpose library, but the fact is that most people use it when they want to make graphs. It is pretty unusual to use it for your average dom manipulation because the d3 learning curve is so steep. It is, however, a far more general tool than jQuery, and generally people build other more specific libraries (such as nvd3) on top of d3 rather than using it directly.

@JohnS's answer is also very good. Fluent API = method chaining. I also agree about where the plugins and extension lead you with the libraries.

I've been using a little of both lately. Since d3 uses Sizzle's selectors you can pretty much mix up selectors.

Just keep in mind d3.select('#mydiv') doesn't return quite the same as jQuery('#mydiv'). It's the same DOM element, but it's being instantiated with different constructors. For example, let's say you have the following element:

<div id="mydiv" rel="awesome div" data-hash="654687867asaj"/>

And let's grab some common methods:

> d3.select('#mydiv').attr('rel') ; "awesome div"> jQuery('#mydiv').attr('rel'); "awesome div"

Seems legit. But if you go a little further:

> d3.select('#mydiv').data(); [undefined]> jQuery('#mydiv').data(); Object {hash: "654687867asaj"}