Web Development with d3.js

1. Examples
2. Reference
3. Setup
4. Drawing
5. Data
6. Arrays and Functions
7. Data Driven Documents
8. Scales
9. Interaction
10. Transitions
11. Data Manipulation
12. Components


Project A (tweets) Project A (tweets, finished)
Project B (Cost of Living) Project B (Cost of Living, finished)
Project C (reddit) Project C (reddit, finished)
Tributary


dot enter mixtape: d3 tutorials with tributary


@enjalot


enja.org
Resulting Visualization of this form
Examples

d3 Gallery

Mike Bostock's Blocks

Jason Davies' Blocks

Meetup avatars prototype => Infographic

Meetup checkin prototype => App

Calendar widget prototype

Gradients and Color Spaces

Interactive fun

Reference


API Reference

Documentation

Tutorials

Best tutorial out


Help

Stack Overflow: d3.js

Mailing list

Bay Area d3 Meetup

Setup

Download the code:
https://github.com/enjalot/intro-d3

Start the python server (from your terminal):

cd intro-d3/gaffta
python -m SimpleHTTPServer 8888

or in windows use something like Fortitude
Drawing

HTML: DOM


SVG: Shapes

(svg spec) (d3.js docs) (svg essentials)

SVG: Coordinate Systems

Transforms Coordinate Systems and Units

SVG: Paths

(spec) (d3.js line) (svg essentials)
Data

JSON

Many APIs return data in the JSON format, i.e Twitter API


Search Query

JSON Lint

CSV

CSV is a common format used to export from Excel and other spreadsheets/databases

Example CSV

XML

XML is a common (but dated) format that you may have to deal with from some APIs
Example XML
Arrays and Functions


Arrays (Lists)


For Loops


Functions
Data Driven Documents


.append()


.enter()
Scales


unscaled


linear
(linear scale)


color
(ordinal scale)
Interaction



(selection.on)
html select example
Transitions





Transitions
Working with Transitions
Thinking with Joins
Update Pattern I
Update Pattern II
Update Pattern III
Data Manipulation


d3 Layouts

d3 Arrays

underscore.js


Nesting

Phoebe's Nest

Mike's Nest

Jerome's Nest

Components


Axes
(d3.svg.axis)
axis in tributary


Brush
(d3.svg.brush)
brush in tributary


Towards Reusable Charts

nvd3

parallel coordinates