• 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();