D3.js

Steve Coffman

gears@umich.edu

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.

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

// select multiple elements from the current document
d3.selectAll('div')

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

// return placeholders for missing elements.
.enter()

// create and append new elements.
.append('div')

// set text content as a function of the data
.text(String);

By stevecoffman

	d3.select('#foo') .style('background', '#000') .on('click', function() {}) .append('div');

	$('#foo') .css('background', '#000') .click(function() {}) .append($('<div></div>'));