Data Visualization: Representing Information on Modern Web

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 ...