What is D3.js?

• Open source JavaScript library for manipulating documents based on data
  • It's SUPER baller
• Built for data visualization with web technologies (HTML, CSS, JavaScript)
  • Default styles are cleanest looking I've seen for a viz library
  • Many charting libraries built on top of D3 - I particularly like NVD3

Facts

• D3 = Data-Driven Documents
• Made by Mike Bostock
• Started in 2010

The Power of D3

http://bl.ocks.org/1256572

http://billmill.org/roundbracket/

http://bost.ocks.org/mike/miserables/

http://mbostock.github.com/d3/talk/20111018/treemap.html

http://mbostock.github.com/d3/talk/20111018/choropleth.html

How D3 Works

What I wish someone had told mewhen I was learning D3

Data-DOM Binding

Think about visualization –it's all about binding data to visual elements.

Force Directed Layout Example

(This is what you're going to make)

Another Example

Get from Git

Download the zip or clone this repo

https://github.com/caseymm/PearlHacks_D3_demo

• Giving you all of the code in the top level index.html
• Two included JSON files
  • kevinBacon.json (Because I think it's funny)
  • miserables.json

Things to know about D3

Render to div id

Using remote data

Need to run a local server to load the data

• Open Terminal or other CLI
• $ python -m SimpleHTTPServer 8000

D3 likes JSON

You don't have to import JSON, but it's typically easier to work with

Concept of Nodes

Colors

Force Layout Specific

Resources

D3.js Website

Gallery

Tutorials

API Reference

GitHub Project

Questions?