Precipitation chart

src/data.js

@@ -35,15 +35,27 @@ export function readxml(xmldoc) {
         cloudCover.push(parseFloat(cloud.textContent))
     }
 
+    // Precipitation
+    let precip = []
+    const probabilityOfPrecipitation = data.getElementsByTagName('probability-of-precipitation')[0]
+    for (let prop of probabilityOfPrecipitation.getElementsByTagName('value')) {
+        precip.push(parseFloat(prop.textContent))
+    }
+
     // Map
     const nElements = startTimes.length
 
     let forcastData = []
     let cloudData = []
+    let precipData = []
     cloudData.push({
         date: startTimes[0],
         coverage: 0
     })
+    precipData.push({
+        date: startTimes[0],
+        probability: 0
+    })
     for (var i = 0; i < nElements; i++) {
         const midtimeScale = d3.scaleTime()
             .domain([0, 1])
@@ -57,16 +69,25 @@ export function readxml(xmldoc) {
             date: midpointTime,
             coverage: cloudCover[i]
         })
+        precipData.push({
+            date: midpointTime,
+            probability: precip[i]
+        })
     }
     cloudData.push({
         date: endTimes[endTimes.length - 1],
         coverage: 0
     })
+    precipData.push({
+        date: endTimes[endTimes.length - 1],
+        probability: 0
+    })
 
     return {
         startTimes: startTimes,
         endTimes: endTimes,
         temperature: forcastData,
-        clouds: cloudData
+        clouds: cloudData,
+        precip: precipData
     }
 }

src/render.js

@@ -330,11 +330,15 @@ export function render_clouds(canvas, width, height, offset, data) {
     const yrange = [0, 100]
     const chart = new Chart(canvas, width, height, offset, margin, data, yrange)
 
-    const line = d3.line()
+    const cloudLine = d3.line()
         .x(function(d) { return chart.xRange(d.date) })
         .y(function(d) { return chart.yRange(d.coverage) })
         .curve(d3.curveBasis)
 
+    const precipLine = d3.line()
+        .x(function(d) { return chart.xRange(d.date) })
+        .y(function(d) { return chart.yRange(d.probability) })
+
     chart.set_yAxisTic(  0,   '0%')
     chart.set_yAxisTic( 50,  '50%')
     chart.draw_xGrid(   50, 'guide')
@@ -344,6 +348,11 @@ export function render_clouds(canvas, width, height, offset, data) {
     canvas.append('path')
         .data([data.clouds])
         .attr('class', 'clouds')
-        .attr('d', line)
+        .attr('d', cloudLine)
+    canvas.append('path')
+        .data([data.precip])
+        .attr('class', 'precip')
+        .attr('d', precipLine)
+
     chart.draw_xAxisLineBottom()
 }

src/style.sass

@@ -76,6 +76,11 @@ path.clouds
     stroke: #bbb
     fill: #ddd
 
+path.precip
+    opacity: 0.7
+    stroke: #99c
+    fill: #aae
+
 line.now
     stroke: #f5f
     stroke-width: 1px