show y axis

src/modules/graph.coffee

@@ -81,11 +81,11 @@ module.exports =
         # Get available space.    
         { height, width } = document.querySelector('#graph').getBoundingClientRect()
 
-        margin = { top: 20, right: 30, bottom: 30, left: 30 }
+        margin = { top: 20, right: 30, bottom: 40, left: 50 }
         width -= margin.left + margin.right
         height -= margin.top + margin.bottom
 
-        # Scales and axis.
+        # Scales and axes.
         x = d3.time.scale().range([ 0, width ])
         y = d3.scale.linear().range([ height, 0 ])
         
@@ -94,9 +94,17 @@ module.exports =
         .tickSize(-height)
         # ...with day of the month...
         .tickFormat( (d) -> d.getDate() )
-        # ...once per day.
+        # ...once per day...
         .ticks(d3.time.hours, 24)
-        
+        # ...and give us a spacer.
+        .tickPadding(10)
+
+        yAxis = d3.svg.axis().scale(y)
+        .orient("left")
+        .tickSize(-width)
+        .ticks(5)
+        .tickPadding(10)
+
         # Area generator.
         area = d3.svg.area()
         .interpolate("precise")
@@ -139,6 +147,11 @@ module.exports =
         .attr("transform", "translate(0,#{height})")
         .call(xAxis)
 
+        # Add the y-axis.
+        svg.append("g")
+        .attr("class", "y axis")
+        .call(yAxis)
+
         # Add the ideal line path.
         svg.append("path")
         .attr("class", "ideal line")
@@ -185,7 +198,7 @@ module.exports =
             # Absolutely position the div.
             div = document.querySelector '#tooltip'
             div.style.left = x(date) + margin.left + 'px'
-            div.style.top = y(points) + margin.top + 'px'
+            div.style.top = -10 + y(points) + margin.top + 'px'
             # And now show us on the div.
             tooltip.show '#tooltip'
         )

src/styles/app.styl

@@ -87,6 +87,7 @@ h2
             &.today
                 stroke: rgba(#FFF, 0.75)
                 stroke-width: 1px
+                shape-rendering: crispEdges
 
         circle
             fill: #FFF
@@ -100,21 +101,16 @@ h2
         .axis
             shape-rendering: crispEdges
             
-            &.x
-                line
-                    stroke: #3D9E68
+            line
+                stroke: #3D9E68
+                shape-rendering: crispEdges
 
-                text
-                    font-weight: bold
-                    fill: #FFF
+            text
+                font-weight: bold
+                fill: #FFF
 
-                path
-                    display: none
-
-            &.y
-                line, path
-                    fill: none
-                    stroke: #000
+            path
+                display: none
 
 #progress
     padding: 20px