How to D3

Procedure to associate data with DOM

1. Select a parent container and child nodes
2. Bind array of data to child nodes
3. Append nodes to parent container
4. Style and animate!

Selection

Select a parent container and child nodes

jQuery

$("div p").css('color', 'red').addClass('classy')
					

D3

d3.select("div").selectAll("p").style('color', 'red')
	.attr('class', 'classy');
					

D3 difference: child nodes might not actually exist

JSFiddle

Data

Bind array of data to child nodes

d3.selectAll("p")
	.data([3, 7, 21, 31, 35, 42])
	.style("font-size", function(d) { return d + "px"; });
						
					

JSFiddle

Appending

Append nodes to parent container

d3.select("body").selectAll("p")
		.data([3, 7, 21, 31, 35, 42])
	.enter().append("p")
		.text(function(d) { return "I’m number " + d + "!"; });
					

Enter and Exit

Using D3’s enter and exit selections, you can create new nodes for incoming data and remove outgoing nodes that are no longer needed.

var bars = d3.select('svg').selectAll('rect');

//if we have more data, add new rectangles for those data items
bars.enter().append('rect')
  .attr('class', 'bar');

//if we have less data points, remove the rectangles that no longer have a data pairing. 
bars.exit().remove();

					

if you forget about the enter and exit selections, you will automatically select only the elements for which there exists corresponding data.

// Update…
var p = d3.select("body").selectAll("p")
	.data([3, 7, 21, 31, 35, 42])
	.text(function(d,i){ return "I'm paragraph number" + i; });

// Enter…
p.enter().append("p")
	.text(function(d,i){ return "I'm paragraph number" + i; });

// Exit…
p.exit().remove();
					

JSFiddle

Style

You can also use data or index in a callback to define any property.

d3.select("div").selectAll("p").style("color", function(data, index) {
	return i % 2 ? "red" : "blue";
});
					

JSFiddle

Transition

D3’s interpolators support both primitives, such as numbers and numbers embedded within strings (font sizes, path data, etc.), and compound values.

d3.selectAll("circle").transition()
	.duration(750)
	.delay(function(d, i) { return i * 10; })
	.attr("r", function(d) { return Math.sqrt(d * scale); });
				

SVG

SVG is another HTML element, except you can't put another HTML element inside an SVG.

SVG does not support common HTML attributes or styles such as width, height, position, left, top, right, bottom or float.

Circle

Rectangle

Line

Path

• M - move.
• L - line.
• z - close path.

Text

Unless you set the style of the SVG text, it inherits font-styles from CSS.

Group

Any transformations (positioning, scaling, rotating) that are applied to the group element will also be applied to each of the child elements.

Let's make something

Exercise: http://tinyurl.com/sva-d3-ex

In case you get stuck... Solution

More Advanced D3

Scales and Domains

Axis

Tooltips

Loading external data

Scales

Scales convert between data and visual encodings.

• Quantitative Scale
• d3.scale.linear - construct a linear quantitative scale.
• linear.domain - get or set the scale's input domain.
• linear.domain - get or set the scale's output range.
• Ordinal Scale

Color Categories

d3.scale.category10() - Constructs a new ordinal scale with a range of ten categorical colors:

JSFiddle

Axis

d3.svg.axis creates a new axis generator.

• axis.scale
• axis.orient
• axis.ticks
• axis.tickFormat

Working with Arrays

Most commonly used functions

• d3.min/d3.max
• d3.range - generate a range of random numeric values
• d3.map
• map.forEach - calls the specified function for each entry in the map.
• map.get - returns the value for the specified key.
• map.set - sets the value for the specified key.
• d3.keys - lists the keys of an associative array.
• d3.merge - merges multiple arrays into one array.
• d3.nest - groups array elements hierarchically.

Loading External Resources

• d3.json
• d3.csv
• d3.tsv

Examples

Bar Chart with tooltip

Bar Chart from a .tsv

Pie Chart

Good News!

• NVD3
• C3.js
• Rickshaw

Other D3 resources

• Scott Murray / @alignedleft
• Angular and D3 book by Ari Lerner and Victor Powell
• D3 meet-up group hosted by Ian Johnson
• Jerome Cukier / @jcukier

THE END