weather-board/src/render.js

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

    let beginTime = new Date(
        data.startTimes[0].getFullYear(),
        data.startTimes[0].getMonth(),
        data.startTimes[0].getDate(),
        0,0,0
    )

    let xRange = d3.scaleTime()
        .domain([beginTime, data.endTimes[nElements - 1]])
        .range([xMargin, xWidth])
    let yRange = d3.scaleLinear()
        .domain([-15, 45])
        .range([yHeight - yMargin, 0])

    let line = d3.line()
        .x(function(d) { return xRange(d.date) })
        .y(function(d) { return yRange(d.temp) })
        .curve(d3.curveBasis)

    canvas.append('path')
        .data([data.temperature])
        .attr('class', 'data')
        .attr('d', line)
}