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

ecarlisle@lgscout.com

eric_carlisle

https://github.com/ecarlisle/d3-jsnation

http://www.slideshare.net/ericcarlisle

Email

Twitter:

Github:

SlideShare: