dazzing data depiction with d3.js
DESCRIPTION
Find presentation code at: https://github.com/ecarlisle/d3-jsnationTRANSCRIPT
with
Dazzling Data
Depiction
.JS
https://github.com/ecarlisle/d3-jsnation
http://www.slideshare.net/ericcarlisle
Github:
SlideShare:
Me, Myself, and I
Name:
Craft:
Crew:
Locale:
XP:
Eric Carlisle
UI / UX Architect
Baltimore, MD
Agenda
• Brief History of the World (abridged for D3)
• What D3 is & What it’s Not
• Getting Started with D3
• Enter, Update, Exit
• Transitions
• Scales
• Q&A
Before D3, Data Viz was…
• Part of a larger software suite.
Before D3, Data Viz was…
or
• Piped through a browser
plugin.
• Part of a larger software suite.
Before D3, Data Viz was…
or
• Piped through a browser
plugin.
• Dependent on a 3rd party
service.
or
• Part of a larger software suite.
Before D3, Data Viz was…
• An Excel export.
or
• Piped through a browser
plugin.
• Dependent on a 3rd party
service.
or
or
• Part of a larger software suite.
What is D3?
“A JavaScript library for manipulating
documents based on data”
Standards based
Native to Modern Browsers*
Data Driven Documents
What is D3?
* Version 9+ of the browser that shall not be named.
“A JavaScript library for manipulating
documents based on data”
Standards based
Native to Modern Browsers*
Data Driven Documents
D3 is NOT a…
• Monolithic JavaScript framework
• Graphing, charting library
• Graphical Abstraction
• Shim
D3 is NOT a…
• Monolithic JavaScript framework
• Graphing, charting library
• Graphical Abstraction
• Shim
Getting Started
Familiar with ?
DOM Selection – jQuery (Sizzle) DOM Selection – D3 (W3C Selectors API)
Method Chaining – jQuery Method Chaining – D3
CODE NOW!
Getting Started
Event Handling – jQuery Events – D3
Data Retrieval - jQuery Data Retrieval – D3
?Familiar with
MOAR CODE!
The Enter, Update, Exit
PatternTypical pattern for binding data to the DOM
DATA
∩
DOMDATA \ DOM DOM \ DATA
DATA DOM
The Enter, Update, Exit
PatternTypical pattern for binding data to the DOM
selection.data()
UPDATEENTER EXIT
MOAR MOAR CODE!
Transitions
• Selections operating over time
• Transformation via interpolation
• Can be good or evil.
• Can be chained
Transitions
• Selections operating over time
• Transformation via interpolation
• Can be good or evil.
• Can be chained
CODE!Hello, what have we here?
Scales
• Maps domain input to output range
• Does the math for you!!!
• Quantitative, Ordinal, Time
• Can be chained
Domain: range of input values (data)
Range: range of output values (constraint)
CODE!(DEEP BREATH)
Also Check Out
• NVD3 http://nvd3.org/
• C3 http://c3js.org/
• Rickshaw http://code.shutterstock.com/rickshaw/
• Dashing D3.JS https://www.dashingd3js.com/
Q&A
eric_carlisle
https://github.com/ecarlisle/d3-jsnation
http://www.slideshare.net/ericcarlisle
Twitter:
Github:
SlideShare: