Introduction to d3.js

Today's Goals:

Combo

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

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.csv
d3.min / d3.max

Go!

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

Transitions

One Dimension Example

Transition One Dimension d3 docs Example

Scatter Plot to Map and Back Example

Data Viz Bonus Example