Steve Coffman


August 6, 2013


What D3.js offers

Example Visualizations

Data-Binding Tutorial

D3.js and jQuery

What is D3.js?

D3 stands for Data Driven Documents.

It is a JavaScript library that

connects between data and graphics.

D3.js provides:

  • Elegant data-binding to DOM elements (e.g. SVG, HTML).

  • Sophisticated DOM manipulation (e.g. set attributes as functions of data).

  • Smooth animation transformations.

  • Comprehensive algorithm support (e.g. voronoi, quadtrees, convex hull, projections, circle fitting).


Data-binding to DOM 1

// select multiple elements from the current document

Data-binding to DOM 2

// set data for a group of elements, while computing a relational join
.data([1, 2, 3])

Data-binding to DOM 3

// return placeholders for missing elements.

Data-binding to DOM 4

// create and append new elements.

Data-binding to DOM 5

// set text content as a function of the data

Data-binding the DOM 6

More Detailed Example

What is D3.js?

By stevecoffman