outline.html

1) What is this magical world that is: http://bl.ocks.org/mbostock ???

2) Let's make a force-directed graph: http://bl.ocks.org/mbostock/4062045
  a) Create a folder (desktop is always nice). Let's call it D3DAY
  b) Copy code from bl.ocks.org into a new file in D3DAY called force_v1.html
  c) Copy json code directly into a new file in D3DAY called miserables.json
  d) Copy & paste this into your terminal: python -m SimpleHTTPServer. That assumes you have python 2.7. If you're in windows, you'll probably need to type something like C:/Python27/python.exe -m SimpleHTTPServer (untested).
  e) Go to localhost:8000/force_v1.html
  f) It works!

3) But who has json files? Everyone has spreadsheets. Let's edit this visualization to input a csv file.
  a) Get miserables.csv from github (https://github.com/pkpp1233/appliedvisualization) and open in Excel to take a look
  b) Convert this csv structure into what our code expects. Console.log() is our friend.
  c) --optional: Typically, our files are in a different format. Here's a quick way to convert from flat to what we need (use grafly).

4) Did we just build the most flexible force graph ever? Let's try with amazing NBA data(teams.csv). Doesn't work! Looks like we do need to learn some d3.
  a) Color: https://github.com/mbostock/d3/wiki/Ordinal-Scales
  b) Force: https://github.com/mbostock/d3/wiki/Force-Layout
  c) Data Binding: http://mbostock.github.io/d3/tutorial/circle.html

5) Now we're off! Let's spend the rest of the time building bl.ocks.org visualizations with our own data. Split up into pairs, choose a visualization, and build with one of your datasets (then the other). Here are a few recommended blocks:
  a) Pie Chart: http://bl.ocks.org/mbostock/3887235
  b) Bar Chart: http://bl.ocks.org/mbostock/7452541
  c) Line Chart: http://bl.ocks.org/mbostock/3884955
  d) Area With Brushing (fancy): http://bl.ocks.org/mbostock/1667367
  e) Parallel Coordinates (fancy): http://bl.ocks.org/mbostock/7586334

6) Next Steps (Go deeper with javascript and d3):
  a) Scott Murray is the man: http://alignedleft.com/tutorials/d3/
  b) d3noob.org is great
  c) Learn from existing frameworks: http://nvd3.org, http://code.shutterstock.com/rickshaw/, http://d3-generator.com/, http://tenxer.github.io/xcharts/
  d) Go wild