Sort of working with real, live data

src/app/main.coffee

@@ -6,8 +6,8 @@ currentFrame = 0
 window.nesstartimebars = {}
 
 window.nesstartimebars.main = (containerId) ->
-  nesstarloader.reloadNesstarData( (foo) ->
-    timebars.setupChart containerId, foo
+  nesstarloader.reloadNesstarData( (data) ->
+    timebars.setupChart containerId, data
     currentFrame = timebars.nextFrame containerId, currentFrame
   )
 
@@ -19,7 +19,8 @@ window.nesstartimebars.main = (containerId) ->
         .innerHTML = "<i class='fa fa-play'></i>"
     else
       timeBarAnim = setInterval ->
-        timebars.nextFrame containerId
+        console.log "Frame #" + currentFrame
+        currentFrame = timebars.nextFrame containerId, currentFrame
       , timebars.speed()
       document.getElementById("playBtn")
         .innerHTML = "<i class='fa fa-pause'></i>"

src/app/nesstarloader.coffee

@@ -14,6 +14,7 @@ requestDescription = () ->
         },
         {
           "id": "alder"
+          "members": []
         },
         {
           "id": "Kjnn",
@@ -46,7 +47,7 @@ assembleDataRequest = () ->
   JSON.stringify(datadesc.filter)
 
 # Turns the over-verbose and rigid cell descriptions from the Nesstar REST cube
-# JSON format into something more manageble
+# JSON format into something a bit more manageable
 flattenNesstarData = (cellValue) ->
   flattenedCell = lodash.object lodash.map cellValue.coordinate, (x) ->
     [ x.category, x.member ]
@@ -55,7 +56,7 @@ flattenNesstarData = (cellValue) ->
   flattenedCell
 
 # Runs a Nesstar cube REST response through flattenNesstarData and then sorts
-# the resulting collection of objects by year and gender
+# the resulting collection of objects by year and birthyear
 prepareFuncFactory = (callback) ->
   prepareDataForTimeBar = ->
     values = JSON.parse(@response).payload.values
@@ -70,12 +71,17 @@ prepareFuncFactory = (callback) ->
 
     flattenedValuesByYearAndBirthYear =
       lodash.mapValues valuesByYearAndBirthYear, (years) ->
-        lodash.map years, (birthYear) ->
+        lodash.filter lodash.map(years, (birthYear) ->
           {
             birthyear: parseInt(birthYear[0].tid) - parseInt(birthYear[0].alder)
+            year: parseInt birthYear[0].tid
+            age: parseInt birthYear[0].alder
             rvalue: birthYear[0].value
             lvalue: birthYear[1].value
           }
+        ), (cell) ->
+          #Ages < 100 are really age groups. Eeeeewww!
+          cell.age < 100
 
     callback flattenedValuesByYearAndBirthYear
 

src/app/timebars.coffee

@@ -3,40 +3,55 @@ lodash = require 'lodash'
 
 completeData = {}
 
-chartWidth = -> 900
-chartHeight = -> 500
-numBars = -> 100
-speed = -> 100
-margin = -> 10
+chartWidth = (containerId) ->
+  parseInt d3.select(containerId).style "width"
 
-barThickness = ->
-  chartHeight() / numBars()
+chartHeight = (containerId) ->
+  500
 
-x = d3.scale.linear()
-  .domain [ 0, 100]
-  .range [ 0, chartWidth() / 2 ]
+numBars = (containerId) ->
+  vals = lodash.first(lodash.values completeData[containerId])
+  vals.length
 
-y = d3.scale.linear()
-  .domain [ 0, numBars()]
-  .rangeRound [ 0, chartHeight() ]
+margin = (containerId) ->
+  chartWidth(containerId) / 50
 
-addBar = (newBar) ->
+speed = -> 500
+
+barThickness = (containerId) ->
+  chartHeight(containerId) / numBars(containerId)
+
+x = (containerId) ->
+  d3.scale.linear()
+    .domain [
+      0,
+      d3.max(valuesFromFrame(containerId, 0), (d) -> Math.max(d.rvalue, d.lvalue))
+    ]
+    .range [ 0, chartWidth(containerId) / 2 ]
+
+y = (containerId, val) ->
+  d3.scale.linear()
+    .domain(d3.extent valuesFromFrame(containerId, 0), (d) -> d.age)
+    .rangeRound [ 0, chartHeight(containerId) ]
+
+addBar = (newBar, containerId) ->
   barGroup = newBar.append "g"
     .attr "class", "valuepoint"
     .attr "transform", (d, i) ->
-      "translate(0, " + (y(i) + .5) + ")"
+      "translate(0, " + (y(containerId)(i) + .5) + ")"
 
   barGroup.append "rect"
     .attr "class", "right"
-    .attr "x", chartWidth() / 2 - margin()
-    .attr "width", (d) -> x d.rvalue
-    .attr "height", barThickness()
+    .attr "x", chartWidth(containerId) / 2 + margin(containerId)
+    .attr "width", (d) -> x(containerId)(d.rvalue)
+    .attr "height", barThickness containerId
 
   barGroup.append "rect"
     .attr "class", "left"
-    .attr "x", (d) -> (chartWidth() / 2) - x d.lvalue + margin()
-    .attr "width", (d) -> x d.lvalue
-    .attr "height", barThickness()
+    .attr "x", (d) -> (chartWidth(containerId) / 2) -
+        x(containerId)(d.lvalue) - margin(containerId)
+    .attr "width", (d) -> x(containerId)(d.lvalue)
+    .attr "height", barThickness(containerId)
 
 valuesFromFrame = (containerId, frameNum) ->
   frameIndexes = lodash.keys(completeData[containerId])
@@ -52,9 +67,9 @@ updateChart = (containerId, frameNum) ->
     .ease "linear"
     .duration speed()
     .attr "transform", (d, i) ->
-      "translate(0, " + (y(i) + .5) + ")"
+      "translate(0, " + (y(containerId)(i) + .5) + ")"
 
-  addBar valuepoints.enter()
+  addBar valuepoints.enter(), containerId
 
   valuepoints.exit()
     .transition()
@@ -66,7 +81,7 @@ updateChart = (containerId, frameNum) ->
 nextFrame = (containerId, frameNum) ->
   num = frameNum or 0
   num++
-  if num > lodash.keys(completeData[containerId]).length
+  if num >= lodash.keys(completeData[containerId]).length
     num = 0
   updateChart containerId, num
   num
@@ -78,15 +93,24 @@ nextFrame = (containerId, frameNum) ->
 #are ignored), each element in these arrays should contain an object that has
 #the value property.
 #
-#The conteinerId is just a string identfying a div within wich the graph should
-#be built
+#The conteinarId is just a string identfying a div within wich the graph should
+#be built. There can be several simultanious graphs
 setupChart = (containerId, data) ->
-  completeData[containerId] = data
-  chart = d3.select containerId
-    .insert "svg"
-      .attr "class", "chart"
-      .attr "width", chartWidth()
-      .attr "height", chartHeight()
+  if data
+    completeData[containerId] = data
+
+  lodash.forEach (lodash.keys completeData), (id) ->
+    d3.select id
+      .html ""
+
+    d3.select id
+      .insert "svg"
+        .attr "class", "chart"
+        .attr "width", chartWidth(id)
+        .attr "height", chartHeight(id)
+    nextFrame id, 0
+
+  window.onresize = setupChart
 
 exports.setupChart = setupChart
 exports.speed = speed