Axis lines and labels

src/render.js

@@ -1,33 +1,110 @@
 var d3 = require('d3')
 
+
 export function render(canvas, data) {
-    let xWidth = canvas.node().getBoundingClientRect().width
-    let yHeight = canvas.node().getBoundingClientRect().height
-    let xMargin = 50
-    let yMargin = 25
-    let nElements = data.startTimes.length
+    const xWidth = canvas.node().getBoundingClientRect().width
+    const yHeight = canvas.node().getBoundingClientRect().height
+    const xMargin = 50
+    const yMargin = 25
+    const nElements = data.startTimes.length
 
-    let beginTime = new Date(
+    const beginTime = new Date(
         data.startTimes[0].getFullYear(),
         data.startTimes[0].getMonth(),
         data.startTimes[0].getDate(),
         0,0,0
     )
 
-    let xRange = d3.scaleTime()
+    const xRange = d3.scaleTime()
         .domain([beginTime, data.endTimes[nElements - 1]])
         .range([xMargin, xWidth])
-    let yRange = d3.scaleLinear()
+    const yRange = d3.scaleLinear()
         .domain([-15, 45])
         .range([yHeight - yMargin, 0])
 
-    let line = d3.line()
+    const xLine = function (location, style) {
+        canvas.append('line')
+            .attr('class', style)
+            .attr('x1', xMargin)
+            .attr('x2', xWidth)
+            .attr('y1', yRange(location))
+            .attr('y2', yRange(location))
+    }
+    const yLine = function (date, style) {
+        canvas.append('line')
+            .attr('class', style)
+            .attr('x1', xRange(date))
+            .attr('x2', xRange(date))
+            .attr('y1', 0)
+            .attr('y2', yHeight - yMargin)
+    }
+    const xAxisLabel = function (date) {
+        canvas.append('text')
+            .attr('class', 'axis-label')
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'alphabetic')
+            .attr('x', xRange(date))
+            .attr('y', yHeight - yMargin + 12)
+            .text(date.toLocaleDateString('en-US', {weekday: 'long'}))
+    }
+    const yAxisLabel = function (value) {
+        canvas.append('text')
+            .attr('class', 'axis-label')
+            .attr('text-anchor', 'end')
+            .attr('dominant-baseline', 'middle')
+            .attr('x', xMargin - 5)
+            .attr('y', yRange(value))
+            .text(value + ' °C')
+    }
+
+    const line = d3.line()
         .x(function(d) { return xRange(d.date) })
         .y(function(d) { return yRange(d.temp) })
         .curve(d3.curveBasis)
 
+    ////////////////////////////////////////////////////////////////////////////////////////////////
+    // Paint
+
+    yLine(Date.now(), 'now')
+    for (let time of data.startTimes) {
+        if (time.getHours() === 0) {
+            yLine(time, 'midnight')
+        }
+        if (time.getHours() === 12) {
+            yLine(time, 'noon')
+            xAxisLabel(time)
+        }
+    }
+
+    xLine(-10, 'guide')
+    xLine(  0, 'zero')
+    xLine( 12, 'guide')
+    xLine( 22, 'guide')
+    xLine( 30, 'hot')
+    xLine( 40, 'guide')
+    yAxisLabel(-10)
+    yAxisLabel(0)
+    yAxisLabel(12)
+    yAxisLabel(22)
+    yAxisLabel(30)
+    yAxisLabel(40)
+
     canvas.append('path')
         .data([data.temperature])
         .attr('class', 'data')
         .attr('d', line)
+
+    // Axis Lines
+    canvas.append('line')
+        .attr('class', 'axis')
+        .attr('x1', xMargin)
+        .attr('x2', xMargin)
+        .attr('y1', 0)
+        .attr('y2', yHeight - yMargin)
+    canvas.append('line')
+        .attr('class', 'axis')
+        .attr('x1', xMargin)
+        .attr('x2', xWidth)
+        .attr('y1', yHeight - yMargin)
+        .attr('y2', yHeight - yMargin)
 }

src/style.sass

@@ -47,3 +47,36 @@ path, line
 path.data
     stroke: #f00
     stroke-width: 2px
+
+line.now
+    stroke: #f5f
+    stroke-width: 1px
+
+line.midnight
+    stroke: #ccc
+    stroke-width: 1px
+
+line.noon
+    stroke: #ddd
+    stroke-width: 1px
+    stroke-dasharray: 4,8
+
+line.zero
+    stroke: #25f
+    stroke-width: 0.7px
+
+line.hot
+    stroke: #f52
+    stroke-width: 0.7px
+
+line.guide
+    stroke: #ccc
+    stroke-width: 0.5px
+    stroke-dasharray: 4,8
+
+line.axis
+    stroke: #000
+    stroke-width: 1px
+
+text.axis-label
+    font: normal 10px sans-serif