Added x-axis labels, fixed y-axis orientation

src/app/timebars.coffee

@@ -12,9 +12,12 @@ numBars = (chartId) ->
   vals = lodash.first(lodash.values completeData[chartId].yearData)
   vals.length
 
-margin = (chartId) ->
+horizMargin = (chartId) ->
   chartWidth(chartId) / 50
 
+vertMargin = (chartId) ->
+  chartWidth(chartId) / 40
+
 speed = -> 200
 
 barThickness = (chartId) ->
@@ -28,22 +31,50 @@ maxValue = lodash.memoize (chartId) ->
     0)
   0)
 
-xScale = (chartId) ->
+maxAge = lodash.memoize (chartId) ->
+  years = lodash.values completeData[chartId].yearData
+  lodash.reduce(years, (max, yearData) ->
+    Math.max max, lodash.reduce(yearData, (max, val) ->
+      Math.max max, val.age
+    0)
+  0)
+
+
+xScaleRight = (chartId) ->
+  d3.scale.linear()
+    .domain [
+      0
+      maxValue chartId
+    ]
+    .range [ 0, (chartWidth(chartId) / 2) - (horizMargin(chartId) * 2) ]
+    .nice()
+
+xScaleLeft = (chartId) ->
   d3.scale.linear()
     .domain [
-      0,
+      0
       maxValue chartId
     ]
-    .range [ 0, (chartWidth(chartId) / 2) - (margin(chartId) * 2) ]
+    .range [(chartWidth(chartId) / 2) - (horizMargin(chartId) * 2), 0 ]
+    .nice()
 
-yScale = lodash.memoize (chartId) ->
+yScale = (chartId) ->
   d3.scale.linear()
-    .domain(d3.extent valuesFromFrame(chartId, 0), (d) -> d.age)
-    .range [ 0, chartHeight chartId ]
+    .domain [
+      0
+      maxAge(chartId)
+    ]
+    .range [ (chartHeight(chartId) - vertMargin(chartId)), 0 ]
 
-xAxis = (chartId) ->
+xAxisLeft = (chartId) ->
   d3.svg.axis()
-    .scale xScale chartId
+    .scale xScaleLeft chartId
+    .orient "bottom"
+    .ticks 5
+
+xAxisRight = (chartId) ->
+  d3.svg.axis()
+    .scale xScaleRight chartId
     .orient "bottom"
     .ticks 5
 
@@ -118,7 +149,9 @@ addBar = (newBar, chartId) ->
   barGroup = newBar.append "g"
     .attr "class", "valuepoint"
     .attr "transform", (d, i) ->
-      "translate(0, " + (yScale(chartId)(i) + 1) + ")"
+      "translate(0, " +
+      (chartHeight(chartId) - yScale(chartId)(i) - vertMargin(chartId) + 1) +
+      ")"
     .on "mouseover", hoverBar chartId
     .on "mouseout", unhoverBar chartId
     .on "click", selectBar chartId
@@ -135,10 +168,10 @@ addBar = (newBar, chartId) ->
 
   barGroup.append "rect"
     .attr "class", "right"
-    .attr "x", chartWidth(chartId) / 2 + margin(chartId)
+    .attr "x", chartWidth(chartId) / 2 + horizMargin(chartId)
     .attr "height", barThickness chartId
     .attr "fill", completeData[chartId].displayDetails.rightcolor
-    .attr "width", (d) -> xScale(chartId)(d.rvalue)
+    .attr "width", (d) -> xScaleRight(chartId)(d.rvalue)
 
   barGroup.append "text"
     .attr "x", chartWidth(chartId) / 2
@@ -147,8 +180,8 @@ addBar = (newBar, chartId) ->
   barGroup.append "rect"
     .attr "class", "left"
     .attr "x", (d) -> (chartWidth(chartId) / 2) -
-        xScale(chartId)(d.lvalue) - margin(chartId)
-    .attr "width", (d) -> xScale(chartId)(d.lvalue)
+        xScaleRight(chartId)(d.lvalue) - horizMargin(chartId)
+    .attr "width", (d) -> xScaleRight(chartId)(d.lvalue)
     .attr "height", barThickness chartId
     .attr "fill", completeData[chartId].displayDetails.leftcolor
 
@@ -174,17 +207,19 @@ updateChart = (chartId, frameNum) ->
 
   valuepoints.transition()
     .attr "transform", (d, i) ->
-      "translate(0, " + (yScale(chartId)(i) + 1) + ")"
+      "translate(0, " +
+      (chartHeight(chartId) - yScale(chartId)(i) - vertMargin(chartId) + 1) +
+      ")"
 
   valuepoints.select "rect.left"
     .transition()
     .attr "x", (d) -> (chartWidth(chartId) / 2) -
-        xScale(chartId)(d.lvalue) - margin(chartId)
-    .attr "width", (d) -> xScale(chartId)(d.lvalue)
+        xScaleRight(chartId)(d.lvalue) - horizMargin(chartId)
+    .attr "width", (d) -> xScaleRight(chartId)(d.lvalue)
 
   valuepoints.select "rect.right"
     .transition()
-    .attr "width", (d) -> xScale(chartId)(d.rvalue)
+    .attr "width", (d) -> xScaleRight(chartId)(d.rvalue)
 
   addBar valuepoints.enter(), chartId
 
@@ -253,17 +288,42 @@ setupChart = (chartId, data, displayDetails) ->
         .attr "width", chartWidth chartId
         .attr "height", chartHeight chartId
 
-    gy = svg.append "g"
+    svg.append "g"
+      .attr "class", "axisLabels"
+      .attr "transform", (d, i) ->
+        "translate(" +
+        horizMargin(chartId) +
+        ", " +
+        (chartHeight(chartId) - vertMargin(chartId)) +
+        ")"
+      .call xAxisLeft(chartId)
+
+    svg.append "g"
+      .attr "class", "axisLabels"
+      .attr "transform", (d, i) ->
+        "translate(" +
+        (horizMargin(chartId) + (chartWidth(chartId) / 2)) +
+        ", " +
+        (chartHeight(chartId) - vertMargin(chartId)) +
+        ")"
+      .call xAxisRight(chartId)
 
     svg.append "g"
       .attr "class", "yAxisGrid"
+      .attr "transform", (d, i) ->
+        "translate(0, " + ((barThickness(chartId) / 2) + 1)  + ")"
       .call yAxisGrid(chartId)
 
     svg.append "g"
-      .attr "class", "yAxisLabels"
+      .attr "class", "axisLabels"
       .attr "transform", (d, i) ->
-        "translate(" + (chartWidth(chartId) / 2 - 15) + ", 0)"
+        "translate(" +
+        ((chartWidth(chartId) - horizMargin(chartId)) / 2) +
+        ", 0)"
       .call yAxisLabels(chartId)
+        .selectAll("text")
+        .style("text-anchor", "middle")
+
 
     metadata = d3.select chartId
       .append "div"

src/style/timebars.scss

@@ -27,12 +27,13 @@ div.chartContainer {
   position: relative;
 }
 
-.yAxisLabels {
+.axisLabels {
   path, line {
     display: none;
   }
 
   text {
+    text-anchor: middle;
     fill: black;
   }
 }
@@ -99,7 +100,7 @@ div.chartContainer {
 
     rect {
       stroke-width: 1px;
-      stroke: red;
+      stroke: #f44;
     }
   }
 }