A  JS  Noob’s  Experience    Learning  D3.js

What  is  D3

D3.js  is  a  JavaScript  library  for  manipulating  documents  based  on  data.  D3  helps  you  bring  

data  to  life  using  HTML,  SVG,  and  CSS.    ~  d3js.org

The  de  facto  standard  for  interactive  data  visualization  on  the  web.

https://github.com/mbostock/d3/wiki/Gallery

Example  Visualizations

http://www.smashingmagazine.com/2012/02/web-­‐drawing-­‐throwdown-­‐paper-­‐processing-­‐raphael/

http://stackoverflow.com/questions/15219732/d3-­‐js-­‐vs-­‐raphael-­‐js

http://www.fastcompany.com/3029760/the-­‐five-­‐best-­‐libraries-­‐for-­‐building-­‐data-­‐vizualizations

"Let’s  face  it,  for  SVG-­‐based  data  visualization,  there  is  no  other  library  that  comes  even  close.”    

Moritz  Stefaner

D3  vs  Others

Why  D3  for  Me

Anatomy  of  Basic  D3  Data  Visualization  HTML,  CSS,  SVG,  JS

Reading  and  Binding  Data

Attributes

Scales

http://chimera.labs.oreilly.com/books/1230000000345

http://journalismcourses.org/

Resources