WHY: Statistical summaries can be misleading
(Visualizations help us check our assumptions)

WHY: We are collecting more data
(Dynamic visualizations can help us quickly make many comparisons)

• More data → more complex theories → more comparisons
• Multidimensional data requires multiple views and summaries to fully understand
• Harder to display all the data on a single static figure
• Examining raw data becomes more difficult

“...to convey the richness of the data stories we are telling rather than simplifying them”

Examples of dynamic visualizations

Visualizing MBTA Data
White City Councils for Black Cities
The Clubs That Connect The World Cup
How the year you were born influences political views

HOW: What is D3?

D3 is a low level javascript based library for turning data into web elements

Data is stored as a property of a web element.

If dataset changes, D3 can handle those changes easily by allowing you to decide what to do with:

• new data not bound to a web element (data enter)
• existing data bound to a web element (data join)
• data that no longer exists bound to a element (data exits)

Once data is bound to a web element, we can change properties of the web element based on the data

Tutorial Part 1: Draw a Circle

Tutorial Part 2: Draw a Circle Based on Data

Tutorial Part 3: Entering and Exiting Data

Tutorial Part 4: Animate Circles Based on Data

D3 Pros and Cons

Pros
• Web based - easy to share
• Flexible styling - web design constantly evolving
• Easy to save static figures - SVG

Cons
• Learning Curve
• Takes more time
• Additional complexity

What do I need to get started?

• HTML: Code Academy
• CSS: CSS Zen Garden
• SVG: David Duce, Ivan Herman and Bob Hopgood
• Local Server: Scott Murray D3 Tutorial
• Web Console: Majd Taby's The WebKit Inspector
• D3 Talks: Vadim Ogievetsky on Developing in D3
• D3 Examples: Mike Bostock (Creater of D3)
• Interactive Visualization: Laddder of Abstraction