D3.js Tutorial

First Part


by Kanit "Ham" Wongsuphasawat

Interactive Data Lab, University of Washington

@kanitw / kanitw.yellowpigz.com

(Based on Vadim Ogievetsky and Scott Murray's work)

## Outline * Examples * Selections & Data * Transitions * Nested Selections * Interactions * Scales & Axes * Tips e.g. Importing Data * Layouts & Maps * More Examples

Show Reels

See

Data-Driven Documents

  • Visualizing Data with Web Standards (HTML/SVG)
  • Data ↦ Elements – constructing a DOM from Data
  • In visualization, each data point has a corresponding element (graphical marks). D3 helps you maintain this mapping!

Selection

.select() + .append()

d3 use CSS Selector

See the Pen dLofq by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen dLofq by Kanit Wongsuphasawat (@kanitw) on CodePen

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

Source: http://alignedleft.com/tutorials/d3/chaining-methods

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

Select and modify elements's properties

See the Pen kfwdp by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen kfwdp by Kanit Wongsuphasawat (@kanitw) on CodePen

Note: notice chained syntax, object as argument

Source: http://vadim.ogievetsky.com/IntroD3/

but .select() only selects one item!

See the Pen rLcBg by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen rLcBg by Kanit Wongsuphasawat (@kanitw) on CodePen

Source: http://vadim.ogievetsky.com/IntroD3/#12

.selectAll()

See the Pen Iruyi by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen Iruyi by Kanit Wongsuphasawat (@kanitw) on CodePen

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!

See the Pen HFBCl by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen HFBCl by Kanit Wongsuphasawat (@kanitw) on CodePen

See in console that the selected rect selection object is an array of array that embed data in __data__ property!

Modified from: http://vadim.ogievetsky.com/IntroD3/#14

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!

See the Pen pLAvt by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen pLAvt by Kanit Wongsuphasawat (@kanitw) on CodePen

.data()

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

See the Pen nFwLt by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen nFwLt by Kanit Wongsuphasawat (@kanitw) on CodePen

Thinking with Join



DataEnterUpdateElementsExit

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



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

.enter()

See the Pen Fawcj by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen Fawcj by Kanit Wongsuphasawat (@kanitw) on CodePen

Source: http://vadim.ogievetsky.com/IntroD3/#20

.enter()

Shorter: append, then update all together!

See the Pen kvCjf by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen kvCjf by Kanit Wongsuphasawat (@kanitw) on CodePen

Source: http://vadim.ogievetsky.com/IntroD3/#21

.enter() from scratch

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

See the Pen kvCjf by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen kvCjf by Kanit Wongsuphasawat (@kanitw) on CodePen

Source: http://vadim.ogievetsky.com/IntroD3/#22

.exit()

See the Pen maGjx by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen maGjx by Kanit Wongsuphasawat (@kanitw) on CodePen

Transitions

.transition()

See the Pen tqaDj by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen tqaDj by Kanit Wongsuphasawat (@kanitw) on CodePen

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

Source: http://vadim.ogievetsky.com/IntroD3/#27

Nested .transition() & .delay()

See the Pen ouIvC by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen ouIvC by Kanit Wongsuphasawat (@kanitw) on CodePen

Mapping Data to Elements

The default is index mapping.

See the Pen DwyLs by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen DwyLs by Kanit Wongsuphasawat (@kanitw) on CodePen

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

A key should be a unique string.

See the Pen FHtjf by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen FHtjf by Kanit Wongsuphasawat (@kanitw) on CodePen

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

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

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

See the Pen bqosD by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen bqosD by Kanit Wongsuphasawat (@kanitw) on CodePen

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

Join key

New Data?

See the Pen GsKnv by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen GsKnv by Kanit Wongsuphasawat (@kanitw) on CodePen

See even better bars transition.

See also

Nested Selections

Nested Selections

See the Pen CuFJz by Kanit Wongsuphasawat (@kanitw) on CodePen

See the Pen CuFJz by Kanit Wongsuphasawat (@kanitw) on CodePen

Source: http://vadim.ogievetsky.com/IntroD3/#33

See also: How Selection Works

"Two Tables"

More examples http://bost.ocks.org/mike/miserables/ http://bl.ocks.org/mbostock/3887051