Thank you Sponsors

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

D3.js

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

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

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

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

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

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

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

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

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

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

D3 vs Tableau D3 Tableau

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

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

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

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

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

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

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

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

How D3 Works

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

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.

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

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)

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

SVG Creating Rects Scales Axis Title Interactivity