D3.js

What

• JavaScript library
• Data Driven Documents

What

• DOM manipulation (does not "draw")
• interpolates position values (does not move elements)

Basic SVG Shapes

• circle
• ellipse
• line
• text (x: left edge of text, y: vertical position of type's baseline)
• path (everything else)

SVG properties

• fill: can also use alpha transparencies
• stroke
• stroke-width
• opacity: 0 => 1

Text Styling

• font-family
• font-size
• color
• etc

Layering & Drawing Order

• SVG does not support z-index (CSS)
• order in which elements are coded determine their depth order

Methods

select/selectAll

• similar to jQuery's $()
• save references to selections in variables to save time later

select/selectAll

• create elements by selecting them
• you can select elements that don't exist yet

.text()

• takes string
• inserts it between opening and closing tags of selection

.append()

• attaches thing to end of the selection
  • goes inside selection, as last child.

D3 anonymous functions

function(d, i) {}

• d: value in data set for that index (if d is an array, you can access that value using bracket notation)
  • e.g. d = [[1,2]]; // d[1] = 2
• i: index of the current element

Binding Data

What is binding?

• "attaching" or associating data to specific elements
• allows us to apply mapping rules
  • data input in
  • visual properties out
• examples:
  • bigger numbers => taller bars
  • special categories => brighter colors

selection.data(dataset)

• select Dom elements to manipulate
• pass in the data
  • e.g. 
    var dataset = [5, 10, 15, 20, 25];

.enter()

• creates new, data-bound elements
• looks at DOM, then looks at data being handed to it
• creates new placeholder elements for each data value that is missing a corresponding DOM element

.exit()

• contains the "leftover" elements for which there is no corresponding data
• var circle = svg.selectAll('circle')
                           .data([32, 57, 112, 293]);
  var circleEnter = circle.enter().append('circle');

.exit()

• contains the "leftover" elements for which there is no corresponding data
• var circle = svg.selectAll('circle')
                           .data([32, 57]);
                            // removing last 2 data points                  circle.exit().remove()

.delay(waitTime)

• wait before doing a transition

.delay(waitTime)

• anonymous functions using values passed in by D3
• per-element delay technique

Looping Transitions

.each('end', transitionFunc)

• .each: tells D3 to perform an action as soon as initial transition ends
• could go on forever-- RECURSION!!

.each('end', transitionFunc)

• wrap your transition in a function
• call .each, and pass in the the same function
• call the function (e.g. 'recolor();')

consecutive (non-looping) transitions

• this: element that just finished its initial transition
  • e.g. 'circle'
• .each('end', function() {...})
  • initiates 2nd transition as soon 1st transition ends

make it loop!

• recursive function call in .each('end', yourFunction)