Introduction to Interactive Data Visualization with d3.js

---

Schedule: Day 1

9:00am: Arrival and Check-In

9:15am: The Landscape of Data Visualization

• Overview of available tools and what will be covered in the next 2 days.

9:30am: Basic Visualization Concepts

• Learning some of the theory and vocabulary that pops up in visualizations, as well as some general guildelines for visual design.

10:00am: Narrative Structures

• Lecture and discussion. Analysis and breakdown of outstanding data visualizations.

###Exercise:

1. What is the narrative structure?
2. How does the visualization lead you through the data?
3. What is the story being told?
4. How could this have been improved?

Examples:

• Where Does the Money Go?
• Word Frequency Between The Bible and the Quran
• Buy or Rent Calculator
• Poverty Tracker
• The Refugee Project

11:15am: Interrogating the Data

• Crime Data per State (2005)

####Exercise:

1. Come up with three questions to ask the data
2. Sketch two visualization types to explore each question

12:00pm: Break for Lunch

1:00pm: Build an Interactive Data Visualization

• Work with CSV file to build a visualization. Data binding, scales, axes, user interaction with d3.js.

4:00pm: Conclusion and Short Review

Schedule: Day 2

9:00am: Arrival and Check In

9:15am: Making Understandable Visualizations

• Making the narrative of data storytelling understandable to the user using principles from UX and interaction deisgn. When and how to include instructions with your visualization, common UX pitfalls, and a close reading of successful visualizaitons.

####Exercise

1. What sort of UI elements are present?
2. Is there a key?
3. How does the visualization instruct the viewer to use it?
4. How could it be improved?

Examples:

• House Hunting
• Four Ways to Slice Obama's Budget Proposal
• Selfiexploratory
• The Death of Afgans
• How Recession Shaped the Economy

10:00am: d3.js vs. CSS

• When to use d3.js and when to use CSS in your visualization. We'll cover this topic both from a visual design and a user interaction perspective.

11:00am: Let's make a map!

12:00pm: Break for Lunch

1:00pm: Animation in Data Visualization

• Understanding when and how to use animation in your visualization. Going through the d3 transition() API, and building multi-step animations.

2:30pm: Continuing Our Map Exercise

4:00pm: Review and Additional Resources

Resources

##Resources, Day 1

The d3.js Environment

• d3 Show Real
• d3 Layouts
• NVD3
• Rickshaw
• Crossfilter
• dc.js
• RAW

---

Basic Visualization Concepts

• Chart Suggestions, A Thought Starter
• d3.js Gallery
• Attribute Encoding
• Preattentive Processing
• Find the Un-bump
• Cartogram Types
• Electoral Vote Maps: 1 2 3 4
• Color Theory Tutorial
• ColorBrewer Scales

---

###Narrative Structure

• Narrative Categories
• Author Driven
  • Refugees by Country
  • The Facebook Offering
• Viewer Driven
  • Crimespotting
  • Paths to the White House
• Martini Glass
  • Out of Sight, Out of Mind
  • US Gun Deaths
• Facebook Friendships

---

###d3.js Time!

• Protovis, an Interactive Toolkit for Visualization
• An SVG Primer
• Binding Data Tutorial
• Scales Tutorial
• Axes Tutorial
• SVG Transform Attribute

---

##Resources Day 2

###UI Design Principles

• Bootstrap Components
• Animatable

---

###Animation

• Piecewise Animations (Graphic)
• Piecewise Animations (Movie)
• d3 Transition API
• Easing Equations
• Motion Studies Video
• d3 Easing Equations, Visualized

---

##General Resources

• Let's Make A Map — d3.geo() Tutorial
• Infochimps — Free Datasets
• A Tour Through the Visualization Zoo
• Mind-Hacking Visual Transitions