A Meandering Introduction to D3.js

Mike Bostock's Bl.ocks

Looking for more? Check out my Previous Class Notes

The Big Picture

Mike Bostock's Interactive Essays
Google Public Data Explorer
Wealth and Health of Nations
Hans Rosling: Stats that Shape Your World View
D3: Data-Driven Documents - academic paper

Getting things on the screen

If you're just getting started with JavaScript, D3.js can be an overwhelming place to start.

Check out these resources for learning HTML5 Canvas if you just want to paint beautiful images on the screen.

Learning the Core Concepts

I'm going to gloss over adding elements, binding data, creating scales, axes, etc. If you want a step-by-step introduction, check out Scott Murray's D3 Tutorials.

There are more tutorials on the D3 Wiki which provide a comprehensive overview of all the basic concepts.

For example, if you like Four Ways to Slice Obama's 2013 Budget Proposal, check out Jim Vallandingham's tutorial on animated bubble charts.

Diving into Details

Fisheye Distortion - Plugin/Documentation
Protovis Parallel Coordinates
Nutrient Parallel Coordinates - and Simple Scatterplot
Fisheye Nutrient Parallel Coordinates

Perceptually Optimized Color Scales
L*a*b* and HCL color spaces
DougX's Canvas Fractals
Zoomable Julia Set

Live Coding

Tributary Blank Slate API Reference

Ask me Questions

The only requirement is the question must be related to an example from Mike Bostock's Bl.ocks