O'Reilly logo

Social Data Visualization with HTML5 and JavaScript by Simon Timms

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

d3.js

d3.js brings a number of functions and a coding style that makes creating even simple graphs like the one above simpler. Let's recreate the above graph using d3 and see how it differs. The first thing to do is introduce an SVG element to the page. With Raphaël, we did this using the constructor; in d3, we'll append an SVG element explicitly, as shown in the following code:

var graph = d3.select("#visualization")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

Immediately, you'll see that the style of the JavaScript used differs greatly from Raphaël. d3 relies heavily on the use of method chaining. If you're new to this concept, it is quick to pick up. Each call to a method performs some action, then returns an object, and the next ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required