Fixed bar width actually being updated.

Also fixed computing of max-width so that it takes all data into
account, not only year 1. This function is now memoized.

src/app/timebars.coffee

@@ -9,7 +9,7 @@ chartWidth = (chartId) ->
 chartHeight = (chartId) -> 700
 
 numBars = (chartId) ->
-  vals = lodash.first(lodash.values completeData[chartId])
+  vals = lodash.first(lodash.values completeData[chartId].yearData)
   vals.length
 
 margin = (chartId) ->
@@ -20,17 +20,22 @@ speed = -> 200
 barThickness = (chartId) ->
   Math.floor(chartHeight(chartId) / numBars(chartId)) - 2
 
+maxValue = lodash.memoize (chartId) ->
+  lodash.reduce(lodash.values(completeData[chartId].yearData), (max, yearData) ->
+    Math.max max, lodash.reduce(yearData, (max, val) ->
+      Math.max max, Math.max(val.rvalue, val.lvalue)
+    0)
+  0)
+
 x_scale = (chartId) ->
   d3.scale.linear()
     .domain [
       0,
-      d3.max(valuesFromFrame(chartId, 0), (d) ->
-        Math.max(d.rvalue, d.lvalue)
-      )
+      maxValue chartId
     ]
     .range [ 0, (chartWidth(chartId) / 2) - (margin(chartId) * 2) ]
 
-y_scale = (chartId) ->
+y_scale = lodash.memoize (chartId) ->
   d3.scale.linear()
     .domain(d3.extent valuesFromFrame(chartId, 0), (d) -> d.age)
     .range [ 0, chartHeight chartId ]
@@ -51,6 +56,7 @@ prepareMetadataDiv = (chartId, data, mapping) ->
   if data
     fieldMapping = mapping or {
       birthyear: "birthyear",
+      age: "age",
       left: "lvalue",
       right: "rvalue"
     }
@@ -69,10 +75,11 @@ prepareMetadataDiv = (chartId, data, mapping) ->
 
     _results.join ""
 
-updateInformation = (chartId, data) ->
+updateMetadata = (chartId, data) ->
   # FIXME: Add a delay to reduce flicker
   if not data
-    data = d3.select(chartId + " svg.chart g.selected").data()[0]
+    #FIXME: Whats needed here is the data for the current frame filtered on the selected year
+    data = completeData[chartId].yearData[completeData[chartId].selectedYear]
   d3.select chartId + " div.dataDetails"
     .html prepareMetadataDiv chartId, data
 
@@ -81,25 +88,23 @@ hoverBar = (chartId) ->
     d3.selectAll chartId + " svg.chart g.valuepoint"
       .filter (p) -> p.birthyear is data.birthyear
       .classed "hovered", true
-    updateInformation chartId, data
+    updateMetadata chartId, data
 
 unhoverBar = (chartId) ->
   (data, index) ->
     d3.selectAll chartId + " svg.chart g.valuepoint"
       .classed "hovered", false
-    updateInformation chartId
+    updateMetadata chartId
 
 selectBar = (chartId) ->
-  # FIXME: Need to store selected status in actual data, or state is lost when
-  # year scrolls out of view
   (data, index) ->
+    completeData[chartId].selectedYear = data.birthyear
+    #FIXME: Shouln't this be updated automatically when the backed data changes?
     d3.selectAll chartId + " svg.chart g.valuepoint"
-      .filter (p) -> p.birthyear is data.birthyear
-      .classed "selected", true
-    d3.selectAll chartId + " svg.chart g.valuepoint"
-      .filter (p) -> p.birthyear isnt data.birthyear
-      .classed "selected", false
-    updateInformation chartId
+      .classed "selected", (d) ->
+        d.birthyear is completeData[chartId].selectedYear
+
+    updateMetadata chartId
 
 addBar = (newBar, chartId) ->
   barGroup = newBar.append "g"
@@ -109,13 +114,15 @@ addBar = (newBar, chartId) ->
     .on "mouseover", hoverBar chartId
     .on "mouseout", unhoverBar chartId
     .on "click", selectBar chartId
+    .classed "selected", (d) ->
+      d.birthyear is completeData[chartId].selectedYear
 
   barGroup.append "rect"
     .attr "class", "right"
     .attr "x", chartWidth(chartId) / 2 + margin(chartId)
-    .attr "width", (d) -> x_scale(chartId)(d.rvalue)
     .attr "height", barThickness chartId
     .attr "fill", completeData[chartId].displayDetails.rightcolor
+    .attr "width", (d) -> x_scale(chartId)(d.rvalue)
 
   barGroup.append "text"
     .attr "x", chartWidth(chartId) / 2
@@ -130,25 +137,38 @@ addBar = (newBar, chartId) ->
     .attr "fill", completeData[chartId].displayDetails.leftcolor
 
 valuesFromFrame = (chartId, frameNum) ->
-  frameIndexes = lodash.keys(completeData[chartId])
-  completeData[chartId]['' + frameIndexes[frameNum] + '']
+  frameIndexes = lodash.keys(completeData[chartId].yearData)
+  completeData[chartId].yearData['' + frameIndexes[frameNum] + '']
 
 updateChart = (chartId, frameNum) ->
   data = valuesFromFrame chartId, frameNum
   chart = d3.select chartId + " svg.chart"
   yAxesGroup = chart.select "yAxesGroup"
 
-  valuepoints = chart.selectAll "g.valuepoint"
-    .data data, (d) -> d.birthyear
-
   label = d3.select chartId + " span.yearLabel"
     .html completeData[chartId].displayDetails.name + " " +
-          lodash.keys(completeData[chartId])[frameNum]
+          lodash.keys(completeData[chartId].yearData)[frameNum]
+
+  valuepoints = chart.selectAll "g.valuepoint"
+    .data data, (d) -> d.birthyear
 
   valuepoints.transition()
     .attr "transform", (d, i) ->
       "translate(0, " + (y_scale(chartId)(i) + 1) + ")"
 
+  valuepoints.classed "selected", (d) ->
+    d.birthyear is completeData[chartId].selectedYear
+
+  valuepoints.select "rect.left"
+    .transition()
+    .attr "x", (d) -> (chartWidth(chartId) / 2) -
+        x_scale(chartId)(d.lvalue) - margin(chartId)
+    .attr "width", (d) -> x_scale(chartId)(d.lvalue)
+
+  valuepoints.select "rect.right"
+    .transition()
+    .attr "width", (d) -> x_scale(chartId)(d.rvalue)
+
   yAxesGroup.call(y_axis chartId)
 
   addBar valuepoints.enter(), chartId
@@ -158,12 +178,14 @@ updateChart = (chartId, frameNum) ->
     .duration speed() / 2
     .attr "height", 0
     .remove()
+
+  updateMetadata chartId
   undefined
 
 nextFrame = (chartId, frameNum) ->
   num = frameNum or 0
   num++
-  if num >= lodash.keys(completeData[chartId]).length
+  if num >= lodash.keys(completeData[chartId].yearData).length
     num = 0
   updateChart chartId, num
   num
@@ -181,7 +203,8 @@ nextFrame = (chartId, frameNum) ->
 #displayDetails contain stuff like labels and colors
 setupChart = (chartId, data, displayDetails) ->
   if data
-    completeData[chartId] = data
+    completeData[chartId] = {}
+    completeData[chartId].yearData = data
     completeData[chartId].displayDetails = displayDetails or {
       name: "Timebars",
       leftsymbol: "fa fa-female",
@@ -194,6 +217,9 @@ setupChart = (chartId, data, displayDetails) ->
       birthyearlabel: "Birthyear"
     }
 
+    completeData[chartId].selectedYear =
+      valuesFromFrame(chartId, 0)[0].birthyear
+
 
   lodash.forEach (lodash.keys completeData), (id) ->
     d3.select id

src/style/timebars.scss

@@ -5,6 +5,12 @@
   border-radius: $radius;
 }
 
+@mixin columns($number: 2) {
+  -moz-columns: $number;
+  -webkit-columns: $number;
+  columns: $number;
+}
+
 #main {
   margin-top: 2em;
 }
@@ -52,6 +58,18 @@ div.metaData {
   span.yearLabel {
     font-size: 150%;
   }
+  dl {
+    dt {
+      display: inline;
+    }
+    dt:after {
+      content: ": ";
+    }
+    dd {
+      display: inline;
+      padding-right: 2em;
+    }
+  }
 }
 
 

www/index.html

@@ -54,7 +54,8 @@
           rightlabel: "Menn",
           leftcolor: "#EBA487",
           rightcolor: "#87CEEB",
-          birthyearlabel: "Fødselsår"
+          birthyearlabel: "Fødselsår",
+          agelabel: "Alder"
         }
       };