112

Referring to this example:

http://vallandingham.me/stepper_steps.html

it seems that the D3 and jQuery libraries are very similar in the sense that they both do DOM manipulation in an object-chaining way.

I'm curious as to know what functions D3 makes easier than jQuery and vice versa. There are plenty of graphing and visualization libraries that use jQuery as a basis (e.g., , , ).

Please give specific examples of how they are different.

7 Answers 7

104
  • 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();
1
  • 10
    nice, one example is worth more than a 1000 words
    – TMG
    Commented Mar 2, 2016 at 22:07
62

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.

4
  • 1
    @zcaudate, d3 isn't on the link because it is so specialized. That link only compares general frameworks.
    – Case
    Commented Nov 2, 2012 at 0:54
  • 1
    The other thing that I would add is that D3 creates a SVG (Scalable Vector Graphics). This is great because things can easily change size and easily remain proportional to the other elements. Although you may be able to accomplish the same thing in JQuery (as shown in the OP's example link) they aren't meant to replace each other.
    – EnigmaRM
    Commented Apr 25, 2013 at 20:40
  • 2
    They are similar in that they both run on Sizzle and use the same selectors (huge part of each framework). However, after selection they construct very different DOM manipulation objects. Commented Nov 3, 2013 at 17:34
  • 5
    +1 for a silly description. I research a lot of client-side libraries and components, but I didn't get past the first sentence on their web-site before feeling completely lost. I clicked on the fancy esoteric hexagonal mozaic of 'things' and it took me somewhere mysterious and unrelated. Since I fail to grasp what's going on here I assume that I'm unworthy of the d3 club. As such, I will diminish, and go into the West, and remain d3-less.
    – Coder Guy
    Commented Oct 28, 2014 at 0:48
15

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"}
3
  • Aha, have wondered why .data() in d3 doesn't work as in jquery. In D3, have to set .attr('data-hash', '654687867asaj')
    – prototype
    Commented Jun 1, 2015 at 3:19
  • 6
    this is a bad comparsion. .data() in jQuery is basically a shortcut for accessing html attribute data-<custom-name>. But in D3 it has nothing to do with html data attributes, and what it does in D3 is returning a new selection as join of data passed in args with already selected elements.
    – nazikus
    Commented Aug 29, 2016 at 19:48
  • 3
    it is a bad comparison now, but as of 2013 it wasn't that bad. Since then, jQuery has dropped a lot of polyfilling for older browsers (data attributes was one of them) while D3 has stopped being a monolithyc library and became instead an entrypoint for a collection of smaller specific libraries
    – ffflabs
    Commented Aug 29, 2016 at 22:58
12

D3 is not just about visual graphs. Data Driven Documents. When you use d3, you bind data to dom nodes. Because of SVG we are able to make graphs, but D3 is so much more. You can replace frameworks like Backbone, Angular, and Ember with using D3.

Not sure who down voted, but let me add some more clarity.

Many websites request data from the server, which usually comes from a database. When the website receives this data, we have to do a page update of the new content. Many frameworks do this, and d3 does this as well. So instead of using a svg element, you can use html element instead. When you call the redraw, it'll quickly update the page with the new content. It's real nice to not have all the extra overhead like jquery, backbone + its plugins, angular, etc. You only need to know d3. Now d3 doesn't have a routing system baked into it. But you can always find one.

Jquery on the other hand, it's sole purpose is to write less code. It's just a short hand version of javascript that has been tested on many browsers. If you don't have a lot of jquery on your webpage. It's a great library to use. It's simple and takes a lotta pains out of javascript development for multiple browsers.

If you tried to implement jquery in a d3 like fashion, it'll be quite slow, as it wasn't designed for that task, likewise, d3 isn't design to post data to servers, it's designed just to consume and render data.

7
  • 1
    "... replace frameworks like Backbone, Angular, and Ember with using D3." can you elaborate?
    – Billy Moon
    Commented Mar 22, 2015 at 11:44
  • From my experience, I've seen many people use these frameworks to render charts and graphs, when you can replace them with d3. If one wanted to, they could also have d3 render data upon the page since it binds data to elements. D3 can work with large datasets faster than jQuery.
    – jemiloii
    Commented Mar 23, 2015 at 13:00
  • not sure who downvoted me, but I wish they could leave a comment. D3 is for data driven documents. Not just charts.
    – jemiloii
    Commented Jun 11, 2015 at 19:36
  • You can build a reusable component with d3 easy. bost.ocks.org/mike/chart
    – jemiloii
    Commented Jul 6, 2015 at 20:09
  • 2
    Not naive, I used only d3 and websockets for an internal tool where I work. D3 dealt with the data binding from the data retrieved from the websockets. I also used d3 to manage a few different views. It was it's own SPA. D3 can handle html elements as well as svg elements. You shouldn't underestimate the programmer. This is why the web is beautiful to me, many ways to do the samething. Just pick the way you enjoy best, it stays fun.
    – jemiloii
    Commented Sep 19, 2016 at 0:57
11

d3 is made for data visualization, it does this by filtering through DOM objects and applying transformations.

jQuery is made for DOM manipulation and making life easier for many basic JS tasks.

If you're looking to turn data into pretty, interactive pictures, D3 is awesome.

If you're looking to move, manipulate or otherwise modify your webpage, jQuery is your tool.

9

Great question!

While both libraries share many of the same features, it seems to me that the greatest difference between jQuery and D3 is the focus.

jQuery is a general purpose library with a focus on being cross-browser and being easy to use.

D3 is focused on data (manipulation and visualisation) and supports only modern browsers. And while it does look like jQuery, it's a lot more difficult to use.

1
  • 5
    jquery follows a write less do more methodology, d3 is focused on rendering data to the document elements. There is a few reasons why d3 is harder, one it uses raw javascript, and two, some of the raw javascript is changed. For example: Javascript forEach(value, index, array), in d3 forEach(index, value, array). I'm not sure why they reverse the function arguments, just what I've seen in the source. I think we could make d3 faster if we nix'ed the pointless functions.
    – jemiloii
    Commented Jun 11, 2015 at 19:50
1

Both can solve the same purpose of creating and manipulating a DOM (whether it be HTML or SVG). D3 surfaces an API that simplifies common tasks you would take when generating/manipulating a DOM based on data. It does this through it's native support for data binding via the data() function. In jQuery you would have to manually process the data and define how to bind to the data in order to generate a DOM. Because of this, your code becomes more procedural and harder to reason and follow. With D3, it's less steps/code and more declarative. D3 also provides some higher level functions that aid in generating data visualization in SVG. Functions like range(),domain(), and scale() make it easier to take data and plot them on a graph. Functions like axis() also make it easier to draw common UI elements you would expect in a chart/graph. There are many other higher-level api libraries that sit on top of D3 to aid in more complex visualizations of data including interactive behavior and animation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.