WORKSHOP.mkd

Making Maps with D3

This workshop assumes you know the following:

• JavaScript
• How to make a basic bar chart with D3:
  • Selections
  • Appending
  • Binding Data
  • Path Generation

But if you don't know D3 or are kind of fuzzy, here's a basic introduction. (Open d3_review.html)

• Selections:

  • change fill color
  • Change "r"
  • Pass in function to randomly change cx
  • Change class of circles
  • Append a rectangle to parent

• Binding Data

  • Select #example_5 svg and append a "g" element
  • Call group "bubbles"
  • Give an array of objects
  • create "bubbles" based on size and position attributes
  • Realize you really need to create a scale

• Path Generation

  • SVG has a language used to define path elements
  • The language for a path lives in the d attribute
  • Path generators need to define an x and a y function
  • Y is upside down, so we need to subtract y value from height

TODO:

• Write outline...