Nir Geier - www.git.ninja 2

D3?D3? What is it?

DEMOSDEMOSTokyo Wind Speed
https://air.nullschool.net/
How whites born in 1937 have
leaned politically over their lives
https://www.nytimes.com/interactive/2014/07/08/upshot/how-the-year-yo
Among the Oscar Contenders, a Host of Connections
http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar

SVGSVG
https://codepen.io/nirgeier/pen/ybQgZJ

• JavaScript library for manipulating documents
based on data
• A (really awesome) tool used to visualize data
• Created by Mike Bostock in 2011

d3 Syntax

d3.select
d3.select()

d3.data()

d3.enter()
switch to yet-to-be-added elements selection

d3.selectAll()

d3.style()

d3 animation https://codepen.io/nirgeier/pen/ZKmeor

d3 animation https://codepen.io/nirgeier/pen/ZKmeor

d3 events https://codepen.io/nirgeier/pen/YVRZmX

d3 events https://codepen.io/nirgeier/pen/YVRZ
mX

d3 Libraries
http://c3js.org
http://nvd3.org

RESOURCESRESOURCES
http://alignedleft.com/tutorials/d3
https://codepen.io/nirgeier/pen/ybQgZJ
https://codepen.io/nirgeier/pen/oWQBmd
https://codepen.io/nirgeier/pen/KmrWpg
https://codepen.io/nirgeier/pen/MmzpoE
https://codepen.io/nirgeier/pen/ZKmeor
https://codepen.io/nirgeier/pen/YVRZmX
http://techslides.com/over-2000-d3-js-examples-and-demos