comments added

vis/coffee/jobs_by_state.coffee

@@ -1,4 +1,11 @@
+# Mostly derived from http://mbostock.github.com/d3/ex/choropleth.html
+# Also http://apike.ca/prog_svg_transform.html
 $ ->
+  # Lots of magic numbers in here.
+  # I attempted to put more of the styling in the css, but for positioning and such
+  # I ended up using a lot of constants.
+  # I believe with a bit more practice with d3.scales, a lot of the positioning code
+  # could be trimmed down
   data = {}
   panel_w = 750
   panel_h = 600
@@ -8,8 +15,12 @@ $ ->
   title_space = 50
   keys_height = 100
   map_scale = 0.5
+
   path = d3.geo.path()
 
+  # Due to the way I started storing the jobs by state data, I did not have a good location 
+  # for this extra data. This array is iterated over manually, which is also probably not 
+  # a great idea.
   attrs = [
     {
       key:"agr"
@@ -45,26 +56,33 @@ $ ->
       key:"pro"
       offsets:[(panel_w + panel_horiz_space),(panel_h + panel_vert_space) * 2]
       title:"6. Professional Service"
-      keys:[["pro-0","Less than", "3 per cent"], ["pro-3", "3 to 5", "per cent"], ["pro-5", "5 per cent", "and over"]]
+      keys:[["pro-0","Less than", "3 per cent"], ["pro-3", "3 to 5", "per cent"], ["pro-5", "5 per cent", "and over"]]  # hack to get around no line breaks in svg
     }
   ]
 
+  # similar to 'quantize' function in the example, but less robust and more tied to the data
   class_for = (name, attr) ->
     state = data[name]
     value = state[attr]
     "#{attr}-#{value}"
 
+  # could probably make each map its own svg graphic. I started doing that, but then the scaling
+  # of the map kept messing up, so I switched back to one svg
   vis = d3.select("#vis")
     .append("svg:svg")
     .attr("class", "chart")
-    .attr("height", 1050)
+    .attr("height", 1050) # hack. should at least be attrs.length * panel_size
 
 
   d3.json "data/jobs_by_state.json", (json) ->
+    # Create a hash out of my json data to quickly access it in the class_for function
     for state in json
       data[state.name] = state
 
+    # This probably shouldn't be nested in the first data callback.
+    # Just wanted to ensure that the jobs data was present before I started coloring
     d3.json "data/us-states-1900.json", (json) ->
+      # manual loop of extras data. Should be converted to a data join and enter in d3
       for attr in attrs
         states = vis.append("svg:g")
           .attr("class", "panel")
@@ -75,7 +93,7 @@ $ ->
           .attr("height", panel_h - (title_space + keys_height))
           .attr("y", title_space)
           .attr("x", side_space)
-          .attr("stroke", "rgb(0,0,0)")
+          .attr("stroke", "rgb(0,0,0)") # no reason to use rgb instead of hex
           .attr("stroke-width", 2)
           .attr("fill-opacity", 0)
 
@@ -89,14 +107,15 @@ $ ->
 
         states.append("svg:g")
           .attr("class", "states")
-          .attr("transform", "translate(-120, 33)")
+          .attr("transform", "translate(-120, 33)") # magic!
         .selectAll("path")
           .data(json.features)
         .enter().append("svg:path")
           .attr("d", path)
           .attr("class", (d) -> class_for(d.name, attr.key))
 
 
+        # Lots of magic numbers to get the keys positioned
         total_keys = attr.keys.length
         key_space = 50
         key_width = 60
@@ -131,3 +150,4 @@ $ ->
           .attr("x", (d, i) -> (key_width + key_space) * i + (key_width / 2))
           .attr("text-anchor", "middle")
           .text((d) -> d[2])
+