Introduction to d3.js

Today's Goals:

Scatter Plot

World Map


Download the code:

Start the python server:

python -m SimpleHTTPServer 8888

Understand the data:
Cost of Living Indices
Explanation of Index

Useful links:
D3 API Docs
SVG Spec
Mozilla Developer Network docs for SVG
CSS Selectors
Intro Tutorial by @alignedleft
Scatter Plot

Get & Play with Data

javascript console and arrays
d3.min / d3.max


Draw Circles Example

Draw Circles with Data Example

Scales d3 docs Example

Axes d3 docs Example

Titles / Labels Example
World Map

Projections d3 docs advanced Example

Plotting Data Example

One Dimension Example

Transition One Dimension d3 docs Example

Scatter Plot to Map and Back Example
Data Viz Bonus Example