weather-board/src/render.js

var d3 = require('d3')


export function render(canvas, data) {
    const xWidth = canvas.node().getBoundingClientRect().width
    const yHeight = canvas.node().getBoundingClientRect().height
    const xMargin = 50
    const yMargin = 25
    const nElements = data.startTimes.length

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

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

    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)
}