weather-board/src/index.js

var d3 = require('d3')
import {readxml} from './data.js'
import {render_calendar, render_nights, render_astronomy, render_temperature, render_clouds, render_rain} from './render.js'
import './style.sass'

const canvas = d3.select('svg')

const url = 'https://forecast.weather.gov/MapClick.php?lat=39.9243509&lon=-75.1696126&FcstType=digitalDWML'
//const url = '/forcast.xml'

const render = function (data) {
    data.beginTime = new Date(
        data.startTimes[0].getFullYear(),
        data.startTimes[0].getMonth(),
        data.startTimes[0].getDate(),
        0,0,0
    )
    data.endTime = new Date(
        data.endTimes[data.endTimes.length - 1].getFullYear(),
        data.endTimes[data.endTimes.length - 1].getMonth(),
        data.endTimes[data.endTimes.length - 1].getDate(),
        23,59,59
    )

    const width = canvas.node().getBoundingClientRect().width
    const height = canvas.node().getBoundingClientRect().height

    const calHeight = 20
    const astroHeight = 45
    const tempHeight = 200
    const cloudHeight = 300
    const rainHeight = height - (calHeight + astroHeight + tempHeight + cloudHeight)

    render_calendar(canvas, width, calHeight, 0, data)
    render_nights(canvas, width, height - calHeight, calHeight, data)
    render_astronomy(canvas, width, astroHeight, calHeight, data)
    render_temperature(canvas, width, tempHeight, calHeight + astroHeight, data)
    render_clouds(canvas, width, cloudHeight, calHeight + astroHeight + tempHeight, data)
    render_rain(canvas, width, rainHeight, calHeight + astroHeight + tempHeight + cloudHeight, data)
}

d3.xml(url).then(function(xmldoc) {
    let data = readxml(xmldoc)
    render(data)
})