D3.js Tutorial

Selection

.select() + .append()

d3 use CSS Selector

Note: .append() return a new selection–containing the appended object(s)

.select() + .attr(), .style()

Select and modify elements's properties

Note: notice chained syntax, object as argument

but .select() only selects one item!

.selectAll()

See also: http://mbostock.github.io/d3/tutorial/circle.html

.data()

Data ↦ Attributes

.data()

Tell D3 that you want the selected elements to correspond to data!

Selection Object

• An array of arrays
• More precisely, subclass of array
• if .data() is called, __data__ of each element will contain the data mapped to that element.

You should have seen this from last slide!

.data()

Data can be objects too!

.data()

What if number of data doesn't match number of items selected?

Thinking with Join

Calling .data() create three arrays – enter, update, exit. .data() returns the update.

Source: http://bost.ocks.org/mike/join/

.enter()

.enter()

Shorter: append, then update all together!

.enter() from scratch

This is a common way that people build visualization in D3!

.exit()

Transitions

.transition()

Note: Transitions in D3 use cubic-in-out as default easing functions. But there are others.

Nested .transition() & .delay()

Mapping Data to Elements

The default is index mapping.

Join key – .data(...,key)

A key should be a unique string.

http://bost.ocks.org/mike/selection/#key

Join key – .data(...,key)

Notice how you can save lines of code with selection.call()

http://bost.ocks.org/mike/selection/#key

Join key

New Data?

See even better bars transition.

See also

• General Update Pattern I, II, III
• Three Little Circles
• Working with Transitions

Nested Selections

Nested Selections

See also: How Selection Works

"Two Tables"