https://github.com/curran/screencasts/tree/gh-pages/introToD3 https://www.youtube.com/watch?v=8jvoTV54nXw http://curran.github.io/screencasts/introToD3/examples/viewer/#/

D3Lecture

Intro to svg elements (1 - 6)

Making graphs W svg (22-24)

Now d3 (56-57)
-javascript svgs 
-Method chaining

Meat of d3 (next tab)
-data binding(.select,.data)
-enter phase (sets base structure for data elements) (functions in attr )
--Virtual selection (.enter) everything after only works in the case where there are no dom elements,only data binding of days array. Everything after will happen to each data point

What happens when I change data to 500?
(change 400 to 500) element disappears out of svg 

Scaling (next tab)
-linear/ordinal
-functional programming returns a function that takes a data point as a parameter

Rendering pattern(next tab)
(comment in second render)
-doesn't act as expected because enter() does not update values.  Remember what is being virtually selected -only non bound data
-we need an update phase

Update(same tab)
-set dynamic attributes apart from the enter phase. (in this case x and fill are dynamic)
(add rects. before attr. & comment update pattern)

What about this... 
(copy first render line to end)
shouldn't this delete the last element? 

Exit
-exit phase (removes data elements that no longer exist)
--virtual selection (.exit) everything after only works in the case where there are dom elements but no data 

Different ways to visualize information - axis of information (80)
-position (x and y axis.)
-color (vary color by ordinal grouping)
-space (r of circle data points)

Things to watch out for when representing information (80, 87)
-example: varying r based on population. 
-when you vary space with a linear scale, pixel space will not represent a constant population. 
-this is because scaling r linearly will add pixel space nonlinearly
-circles grow by sqrt