Add rain chart

src/data.js

@@ -41,6 +41,15 @@ export function readxml(xmldoc) {
     for (let prop of probabilityOfPrecipitation.getElementsByTagName('value')) {
         precip.push(parseFloat(prop.textContent))
     }
+    let precipQPF = []
+    const hourlyQPF = data.getElementsByTagName('hourly-qpf')[0]
+    for (let qpf of hourlyQPF.getElementsByTagName('value')) {
+        if (qpf.getAttribute('xsi:nil') === "true") {
+            precipQPF.push(0)
+        } else {
+            precipQPF.push(parseFloat(qpf.textContent))
+        }
+    }
 
     // Map
     const nElements = startTimes.length
@@ -48,6 +57,7 @@ export function readxml(xmldoc) {
     let forcastData = []
     let cloudData = []
     let precipData = []
+    let precipQPFData = []
     cloudData.push({
         date: startTimes[0],
         coverage: 0
@@ -56,6 +66,10 @@ export function readxml(xmldoc) {
         date: startTimes[0],
         probability: 0
     })
+    precipQPFData.push({
+        date: startTimes[0],
+        qpf: 0
+    })
     for (var i = 0; i < nElements; i++) {
         const midtimeScale = d3.scaleTime()
             .domain([0, 1])
@@ -77,6 +91,14 @@ export function readxml(xmldoc) {
             date: endTimes[i],
             probability: precip[i]
         })
+        precipQPFData.push({
+            date: startTimes[i],
+            qpf: precipQPF[i]
+        })
+        precipQPFData.push({
+            date: endTimes[i],
+            qpf: precipQPF[i]
+        })
     }
     cloudData.push({
         date: endTimes[endTimes.length - 1],
@@ -86,12 +108,17 @@ export function readxml(xmldoc) {
         date: endTimes[endTimes.length - 1],
         probability: 0
     })
+    precipQPFData.push({
+        date: endTimes[endTimes.length - 1],
+        qpf: 0
+    })
 
     return {
         startTimes: startTimes,
         endTimes: endTimes,
         temperature: forcastData,
         clouds: cloudData,
-        precip: precipData
+        precip: precipData,
+        precipQPF: precipQPFData,
     }
 }

src/index.js

@@ -1,6 +1,6 @@
 var d3 = require('d3')
 import {readxml} from './data.js'
-import {render_calendar, render_nights, render_astronomy, render_temperature, render_clouds} from './render.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')
@@ -28,13 +28,15 @@ const render = function (data) {
     const calHeight = 20
     const astroHeight = 45
     const tempHeight = 200
-    const cloudHeight = height - (calHeight +tempHeight + astroHeight)
+    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) {

src/render.js

@@ -361,3 +361,31 @@ export function render_clouds(canvas, width, height, offset, data) {
 
     chart.draw_xAxisLineBottom()
 }
+
+
+export function render_rain(canvas, width, height, offset, data) {
+    const margin = {
+        top: 0,
+        left: leftMargin,
+        bottom: 10,
+        right: 0
+    }
+    const yrange = [0, 0.05]
+    const chart = new Chart(canvas, width, height, offset, margin, data, yrange)
+
+    const rainLine = d3.line()
+        .x(function(d) { return chart.xRange(d.date) })
+        .y(function(d) { return chart.yRange(d.qpf) })
+
+    canvas.append('path')
+        .data([data.precipQPF])
+        .attr('class', 'rain')
+        .attr('d', rainLine)
+
+    chart.set_yAxisTic(  0,   '0')
+    chart.set_yAxisTic( 0.02,  '0.02 in/h')
+    chart.draw_xGrid(   0.02, 'guide')
+    chart.set_yAxisTic( 0.04,  '0.04 in/h')
+    chart.draw_xGrid(   0.04, 'guide')
+    chart.draw_xAxisLineBottom()
+}

src/style.sass

@@ -81,6 +81,11 @@ path.precip
     stroke: #99c
     fill: #aae
 
+path.rain
+    opacity: 0.7
+    stroke: #9c9
+    fill: #9a9
+
 line.now
     stroke: #f5f
     stroke-width: 1px