1. Thank you Sponsors

2. D3.js for Data Visualization
Jared Wilber
D3.js for Data Visualization

3. D3.js

4. What is D3?
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.

5. What is D3?
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.
Created by Mike Bostock and Jeff Heer (Stanford)

6. What is D3?
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.
Created by Mike Bostock and Jeff Heer (Stanford)
Came from Protovis

7. What is D3?
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.
Created by Mike Bostock and Jeff Heer (Stanford)
Came from Protovis
The basis of many charting libraries

8. Who Uses D3?
News Rooms: NYTimes, WSJ, LA TIMES, The Economist, Bloomberg, Dow Jones, etc.

9. Who Uses D3?
News Rooms: NYTimes, WSJ, LA TIMES, The Economist, Bloomberg, Dow Jones, etc.
Netflix

10. Who Uses D3?
News Rooms: NYTimes, WSJ, LA TIMES, The Economist, Bloomberg, Dow Jones, etc.
Netflix
Uber

11. Who Uses D3?
News Rooms: NYTimes, WSJ, LA TIMES, The Economist, Bloomberg, Dow Jones, etc.
Netflix
Uber
Square

12. Who Uses D3?
News Rooms: NYTimes, WSJ, LA TIMES, The Economist, Bloomberg, Dow Jones, etc.
Netflix
Uber
Square
Etc.

13. D3 Examples NYTimes: IPO Comparison Cool Circle Thing The Pudding
Waveforms
Senate Maps

14. D3 vs Tableau D3
Tableau

15. D3 vs Tableau D3
Low Level (programming)
Tableau
High Level (GUI)

16. D3 vs Tableau D3 Low Level (programming) Slower prototyping Tableau
High Level (GUI)
Rapid prototyping

17. D3 vs Tableau D3 Low Level (programming) Slower prototyping
A priori visual encodings
Tableau
High Level (GUI)
Rapid prototyping
Exploratory: Encode as you go

18. D3 vs Tableau D3 Low Level (programming) Slower prototyping
A priori visual encodings
Extremely flexible
Tableau
High Level (GUI)
Rapid prototyping
Exploratory: Encode as you go
Constrained to specific charts

19. D3 vs Tableau D3 Low Level (programming) Slower prototyping
A priori visual encodings
Extremely flexible
Publication Quality
Tableau
High Level (GUI)
Rapid prototyping
Exploratory: Encode as you go
Constrained to specific charts
Production Quality

20. D3 vs Tableau D3 Low Level (programming) Slower prototyping
A priori visual encodings
Extremely flexible
Publication Quality
Can do anything, but excels at one-off, custom visualizations
Tableau
High Level (GUI)
Rapid prototyping
Exploratory: Encode as you go
Constrained to specific charts
Production Quality
Dashboards

21. D3 vs Tableau D3 Low Level (programming) Slower prototyping
A priori visual encodings
Extremely flexible
Publication Quality
Can do anything, but excels at one-off, custom visualizations
Tableau
High Level (GUI)
Rapid prototyping
Exploratory: Encode as you go
Constrained to specific charts
Production Quality
Dashboards
Pretty

22. D3 vs Tableau D3 Low Level (programming) Slower prototyping
A priori visual encodings
Extremely flexible
Publication Quality
Can do anything, but excels at one-off, custom visualizations
Beautiful
Tableau
High Level (GUI)
Rapid prototyping
Exploratory: Encode as you go
Constrained to specific charts
Production Quality
Dashboards
Pretty

23. How D3 Works

24. How D3 Works
D3 is not a template library, so there no functions to create specific plots, you must do it all from scratch.

25. How D3 Works
D3 is not a template library, so there no functions to create specific plots, you must do it all from scratch.
D3 is a data-binding language.

26. How D3 Works
D3 is not a template library, so there no functions to create specific plots, you must do it all from scratch.
D3 is a data-binding language.
D3 creates plots by:
Using SVG to create graphical elements
Using CSS (or SVG attributes) to style SVG elements
Using the DOM (Document Object Model) to position elements

27. How D3 Works
D3 is not a template library, so there no functions to create specific plots, you must do it all from scratch.
D3 is a data-binding language.
D3 creates plots by:
Using SVG to create graphical elements
Using CSS (or SVG attributes) to style SVG elements
Using the DOM (Document Object Model) to position element
D3 does provide some helper functions (scales, axes, certain plot layouts)

28. How D3 Works
Showing > Telling, so let’s write some code! => github.com/jwilber/d3_lunch_and_learn

29. SVG
Creating Rects
Scales
Axis
Title
Interactivity