d3.js tutorial

[brunogirin]

I've been coaching d3.js with one of the West London students and I feel that it could be a good advanced tutorial to go beyond the JavaScript basics. Here's a suggested lesson plan:

Lesson 1 - D3.js basics

• Basic HTML structure
• Append element (add an h1 to the document)
• Simple selection
  • Select (create ul + li, select the ul, set a property)
  • selectAll (set a property on all the li)
• Bind data + enter
• Simple div with text content
• Simple bars
• Coloured bars
• Load external data
  • Local web server
  • Bar width: value
  • Text: title

Lesson 2 - Simple SVG

• Basic SVG scatter plot
• Scales
  • linear
  • time
  • ordinal
• Axes
• Line graphs
• Area graphs
• Box plots

Lesson 3 - Visualisations

• Histogram
• Pie
• Pack
• Dendro
• Stream (area stack)
• Bar Stack (introduce data on sub-fields)

Lesson 4 - Dynamic Graphs

• On
  • Hover + highlight related sections to show how to use selections with “classed” applied and dynamic conditions that are true of false based on data fields
  • Action on click
• Update / exit

[brunogirin]

It would be good to fix #327 and #100 before doing this one as d3.js typically works with SVG.