Merge pull request #167 from opentraffic/kdiluca-barCharts

Barcharts for Reference Speed Comparison

Author: drewda

package-lock.json

@@ -18,22 +18,21 @@ export function addSpeedToMapGeometry (tiles, date, segment, geometry) {
     const state = store.getState()
     const days = state.date.dayFilter || [0, 7]
     const hours = state.date.hourFilter || [0, 24]
-
-    const refspeed = tiles.reference[segment.level][segment.tileIdx].referenceSpeeds80[segment.segmentIdx]
+    const refSpeed = tiles.reference[segment.level][segment.tileIdx].referenceSpeeds80[segment.segmentIdx]
     const subtiles = tiles.historic[date.year][date.week][segment.level][segment.tileIdx]
 
     const subtile = getSubtileForSegmentIdx(segment.segmentIdx, subtiles)
-    if (subtile) {
-      // Append the speed to the geometry to render later
+    if (subtile) {      // Append the speed to the geometry to render later
       const speeds = getValuesFromSubtile(segment.segmentIdx, subtile, days, hours, 'speeds')
       geometry.speedByHour = addSpeedByHour(speeds, days, hours)
       geometry.speed = getMeanSpeed(segment.segmentIdx, subtile, days, hours)
       // calculate percentage difference between weekly/historical speed and reference speed
       if (geometry.speed === null || geometry.speed === 0 || typeof geometry.speed === 'undefined') {
-        geometry.percentDiff = null
+        geometry.percentDiff = 0
       } else {
-        geometry.percentDiff = ((refspeed - geometry.speed) / mathjs.mean(refspeed, geometry.speed)) * 100
+        geometry.percentDiff = ((refSpeed - geometry.speed) / mathjs.mean(refSpeed, geometry.speed)) * 100
       }
+      subtile.percentDiffs.push(geometry.percentDiff)
     }
   } catch (e) {}
 }
@@ -60,37 +59,76 @@ function addSpeedByHour (speedArray, days, hours) {
 }
 
 /**
- * Collect speeds from the entire week for use in bar chart
+ * Collect speeds and percent differences from the entire week for use in bar chart
  * @param {*} tiles
  * @param {*} date
  * @param {*} segment
  */
-export function prepareSpeedsForBarChart (tiles, date, segment) {
+export function prepareDataForBarChart (tiles, date, segment) {
   // not all levels and tiles are available yet, so try()
   // skips it if it doesn't work
   try {
+    const refSpeed = tiles.reference[segment.level][segment.tileIdx].referenceSpeeds80[segment.segmentIdx]
     const subtiles = tiles.historic[date.year][date.week][segment.level][segment.tileIdx]
     const subtile = getSubtileForSegmentIdx(segment.segmentIdx, subtiles)
     if (subtile) {
+      var percentDiffsByDayAndHourArray = mathjs.zeros(7, 24)
       var speedsByDayAndHourArray = mathjs.zeros(7, 24)
       var nonZeroSpeedCountByDayAndHourArray = mathjs.zeros(7, 24)
       var speeds = getValuesFromSubtile(segment.segmentIdx, subtile, [0, 7], [0, 24], 'speeds')
       chunk(speeds, 24).forEach((speedsForThisDay, dayIndex) => {
         speedsForThisDay.forEach((speedForThisHour, hourIndex) => {
           if (speedForThisHour > 0) {
+            const percentDiffForThisHour = ((refSpeed - speedForThisHour) / mathjs.mean(refSpeed, speedForThisHour)) * 100
+            percentDiffsByDayAndHourArray.set([dayIndex, hourIndex], Number(percentDiffForThisHour.toFixed(2)))
             speedsByDayAndHourArray.set([dayIndex, hourIndex], speedForThisHour)
             nonZeroSpeedCountByDayAndHourArray.set([dayIndex, hourIndex], 1)
           }
         })
       })
       return {
         speeds: speedsByDayAndHourArray,
+        percentDiff: percentDiffsByDayAndHourArray,
         counts: nonZeroSpeedCountByDayAndHourArray
       }
     }
   } catch (e) {}
 }
 
+/**
+ * Collect percentDiffs from the entire week for use in bar chart
+ * @param {*} tiles
+ * @param {*} date
+ * @param {*} segment
+ */
+export function preparePercentDiffsForBarChart (tiles, date, segment) {
+  // not all levels and tiles are available yet, so try()
+  // skips it if it doesn't work
+  try {
+    const refSpeed = tiles.reference[segment.level][segment.tileIdx].referenceSpeeds80[segment.segmentIdx]
+    const subtiles = tiles.historic[date.year][date.week][segment.level][segment.tileIdx]
+    const subtile = getSubtileForSegmentIdx(segment.segmentIdx, subtiles)
+    if (subtile) {
+      var percentDiffsByDayAndHourArray = mathjs.zeros(7, 24)
+      var nonZeroDiffCountByDayAndHourArray = mathjs.zeros(7, 24)
+      var speeds = getValuesFromSubtile(segment.segmentIdx, subtile, [0, 7], [0, 24], 'speeds')
+      chunk(speeds, 24).forEach((speedsForThisDay, dayIndex) => {
+        speedsForThisDay.forEach((speedForThisHour, hourIndex) => {
+          if (speedForThisHour > 0) {
+            const percDiff = ((refSpeed - speedForThisHour) / mathjs.mean(refSpeed, speedForThisHour)) * 100
+            percentDiffsByDayAndHourArray.set([dayIndex, hourIndex], percDiff)
+            nonZeroDiffCountByDayAndHourArray.set([dayIndex, hourIndex], 1)
+          }
+        })
+      })
+      return {
+        percentDiffs: percentDiffsByDayAndHourArray,
+        diffCounts: nonZeroDiffCountByDayAndHourArray
+      }
+    }
+  } catch (e) {}
+}
+
 /**
  * Given a segment index, its historic data subtile, and the range of days
  * and hours selected, calculate the mean traffic speed on that segment.
@@ -143,7 +181,7 @@ export function getValuesFromSubtile (segmentIdx, subtile, days, hours, prop) {
     // filter down to the requested range of days
     x => x.slice(...days),
     // filter down to the requested range of hours
-    x => x.map(speedsForGivenDay => speedsForGivenDay.slice(...hours)),
+    x => x.map(forGivenDay => forGivenDay.slice(...hours)),
     // back to just an array of hours
     flatten
   ])(subtile[prop])
@@ -167,6 +205,8 @@ export function getSubtileForSegmentIdx (segmentIdx, subtiles) {
 
   for (let i = 0, j = indices.length; i < j; i++) {
     const subtile = subtiles[indices[i]]
+    // need to initialize the percentDiffs for the barcharts here
+    subtile.percentDiffs = []
 
     const lowerBounds = subtile.startSegmentIndex
     const upperBounds = subtile.startSegmentIndex + subtile.subtileSegments

src/app/processing.js

@@ -3,11 +3,11 @@ import { getTilesForBbox, getTileUrlSuffix, parseSegmentId } from '../lib/tiles'
 import { merge } from '../lib/geojson'
 import { getTangramLayer, setDataSource, getCurrentConfig, setCurrentConfig } from '../lib/tangram'
 import { fetchDataTiles } from './data'
-import { addSpeedToMapGeometry, prepareSpeedsForBarChart } from './processing'
+import { addSpeedToMapGeometry, prepareDataForBarChart } from './processing'
 import store from '../store'
 import { setGeoJSON } from '../store/actions/view'
 import { startLoading, stopLoading, hideLoading } from '../store/actions/loading'
-import { clearBarchart, setBarchartSpeeds } from '../store/actions/barchart'
+import { clearBarchart, setBarchartData } from '../store/actions/barchart'
 import { setRouteError } from '../store/actions/route'
 import { displayRegionInfo } from './route-info'
 import mathjs from 'mathjs'
@@ -134,17 +134,20 @@ export function showRegion (bounds) {
       fetchDataTiles(parsedIds, date)
         .then((tiles) => {
           if (date.year && date.week) {
+            let totalPercentDiffArray = mathjs.zeros(7, 24)
             let totalSpeedArray = mathjs.zeros(7, 24)
             let totalCountArray = mathjs.zeros(7, 24)
+
             parsedIds.forEach((id, index) => {
               addSpeedToMapGeometry(tiles, date, id, features[index].properties)
-              let speedsFromThisSegment = prepareSpeedsForBarChart(tiles, date, id)
-              if (speedsFromThisSegment) {
-                totalSpeedArray = mathjs.add(totalSpeedArray, speedsFromThisSegment.speeds)
-                totalCountArray = mathjs.add(totalCountArray, speedsFromThisSegment.counts)
+              let dataFromThisSegment = prepareDataForBarChart(tiles, date, id)
+              if (dataFromThisSegment) {
+                totalPercentDiffArray = mathjs.add(totalPercentDiffArray, dataFromThisSegment.percentDiff)
+                totalSpeedArray = mathjs.add(totalSpeedArray, dataFromThisSegment.speeds)
+                totalCountArray = mathjs.add(totalCountArray, dataFromThisSegment.counts)
               }
             })
-            store.dispatch(setBarchartSpeeds(totalSpeedArray, totalCountArray))
+            store.dispatch(setBarchartData(totalSpeedArray, totalPercentDiffArray, totalCountArray))
           }
           setDataSource('routes', { type: 'GeoJSON', data: results })
           results.properties = {

src/app/region.js

@@ -3,10 +3,10 @@ import polyline from '@mapbox/polyline'
 import { getRoute, getTraceAttributes, valhallaResponseToPolylineCoordinates } from '../lib/valhalla'
 import { parseSegmentId } from '../lib/tiles'
 import { fetchDataTiles } from './data'
-import { addSpeedToMapGeometry, prepareSpeedsForBarChart } from './processing'
+import { addSpeedToMapGeometry, prepareDataForBarChart } from './processing'
 import { getRouteTime } from './route-time'
 import { startLoading, stopLoading, hideLoading } from '../store/actions/loading'
-import { clearBarchart, setBarchartSpeeds } from '../store/actions/barchart'
+import { clearBarchart, setBarchartData } from '../store/actions/barchart'
 import { setGeoJSON } from '../store/actions/view'
 import {
   clearRouteSegments,
@@ -162,16 +162,19 @@ export function showRoute (waypoints) {
         // TODO: when year and week aren't specified, we should also
         // skip the step of trying to fetch data tiles
         if (date.year && date.week) {
+          let totalPercentDiffArray = mathjs.zeros(7, 24)
           let totalSpeedArray = mathjs.zeros(7, 24)
           let totalCountArray = mathjs.zeros(7, 24)
+
           parsedIds.forEach((id) => {
             // Will add either meaured or reference speed
             addSpeedToMapGeometry(tiles, date, id, id)
-            let speedsFromThisSegment = prepareSpeedsForBarChart(tiles, date, id)
-            totalSpeedArray = mathjs.add(totalSpeedArray, speedsFromThisSegment.speeds)
-            totalCountArray = mathjs.add(totalCountArray, speedsFromThisSegment.counts)
+            let dataFromThisSegment = prepareDataForBarChart(tiles, date, id)
+            totalPercentDiffArray = mathjs.add(totalPercentDiffArray, dataFromThisSegment.percentDiff)
+            totalSpeedArray = mathjs.add(totalSpeedArray, dataFromThisSegment.speeds)
+            totalCountArray = mathjs.add(totalCountArray, dataFromThisSegment.counts)
           })
-          store.dispatch(setBarchartSpeeds(totalSpeedArray, totalCountArray))
+          store.dispatch(setBarchartData(totalSpeedArray, totalPercentDiffArray, totalCountArray))
           const routeTime = getRouteTime(response)
           store.dispatch(setTrafficRouteTime(routeTime))
         }

src/app/route.js

@@ -8,7 +8,7 @@ import 'dc/dc.css'
 // Callback for when data is added to the current filter results
 const reduceAdd = function (p, v) {
   p.count++
-  p.sum += v.meanSpeedThisHour
+  p.sum += v.value // value can be mean speed this hour OR percent diff this hour
   if (p.count > 0) {
     p.avg = (p.sum / p.count)
   } else {
@@ -21,7 +21,7 @@ const reduceAdd = function (p, v) {
 const reduceRemove = function (p, v) {
   // return p - p.
   p.count--
-  p.sum -= v.meanSpeedThisHour
+  p.sum -= v.value // value can be mean speed this hour OR percent diff this hour
   if (p.count > 0) {
     p.avg = (p.sum / p.count)
   } else {
@@ -33,7 +33,7 @@ const reduceRemove = function (p, v) {
 // Initialize `p`
 const reduceInitial = function () {
   return {
-    meanSpeedThisHour: 0,
+    value: 0,
     count: 0,
     sum: 0,
     avg: 0

src/components/Sidebar/TimeFilters/chart.js

@@ -19,11 +19,13 @@ export class TimeFilters extends React.Component {
     dayFilter: PropTypes.arrayOf(PropTypes.number),
     hourFilter: PropTypes.arrayOf(PropTypes.number),
     speedsBinnedByHour: PropTypes.array,
+    percentDiffsBinnedByHour: PropTypes.array,
     refSpeedComparisonEnabled: PropTypes.bool
   }
 
-  componentDidUpdate () {
-    const chartData = crossfilter(this.props.speedsBinnedByHour)
+  componentDidUpdate (prevProps) {
+    const { refSpeedComparisonEnabled, percentDiffsBinnedByHour, speedsBinnedByHour } = this.props
+    const chartData = (refSpeedComparisonEnabled) ? crossfilter(percentDiffsBinnedByHour) : crossfilter(speedsBinnedByHour)
 
     this.makeDailyChart(chartData)
     this.makeHourlyChart(chartData)
@@ -49,6 +51,7 @@ export class TimeFilters extends React.Component {
   shouldComponentUpdate (nextProps) {
     return (
       !isEqual(nextProps.speedsBinnedByHour, this.props.speedsBinnedByHour) ||
+      !isEqual(nextProps.percentDiffsBinnedByHour, this.props.percentDiffsBinnedByHour) ||
       !isEqual(nextProps.refSpeedComparisonEnabled, this.props.refSpeedComparisonEnabled)
     )
   }
@@ -134,6 +137,7 @@ function mapStateToProps (state) {
     dayFilter: state.date.dayFilter,
     hourFilter: state.date.hourFilter,
     speedsBinnedByHour: state.barchart.speedsBinnedByHour,
+    percentDiffsBinnedByHour: state.barchart.percentDiffsBinnedByHour,
     refSpeedComparisonEnabled: state.app.refSpeedComparisonEnabled
   }
 }

src/components/Sidebar/TimeFilters/index.js

@@ -6,9 +6,10 @@ export function clearBarchart () {
   }
 }
 
-export function setBarchartSpeeds (speedsArray, countArray) {
+export function setBarchartData (speedsArray, diffsArray, countArray) {
   let meanSpeedArray
-  if (countArray) {
+  let percentDiffArray
+  if (countArray && diffsArray) {
     meanSpeedArray = speedsArray.map((value, index, matrix) => {
       let count = countArray.get(index)
       if (count && count > 0) {
@@ -17,19 +18,66 @@ export function setBarchartSpeeds (speedsArray, countArray) {
         return 0
       }
     })
+    percentDiffArray = diffsArray.map((value, index, matrix) => {
+      let count = countArray.get(index)
+      if (count && count > 0) {
+        return (value / count)
+      } else {
+        return 0
+      }
+    })
   } else {
     meanSpeedArray = speedsArray
+    percentDiffArray = diffsArray
   }
+
   let hoursForCrossFilter = []
+  let hoursForDiffCrossFilter = []
   meanSpeedArray.forEach((speed, index) => {
     hoursForCrossFilter.push({
       'dayOfWeek': index[0] + 1,
       'hourOfDay': index[1] + 1,
-      'meanSpeedThisHour': speed
+      'value': speed
+    })
+  })
+  percentDiffArray.forEach((diff, index) => {
+    hoursForDiffCrossFilter.push({
+      'dayOfWeek': index[0] + 1,
+      'hourOfDay': index[1] + 1,
+      'value': diff
+    })
+  })
+  return {
+    type: ADD_SEGMENTS_TO_BARCHART,
+    speedsBinnedByHour: hoursForCrossFilter,
+    percentDiffsBinnedByHour: hoursForDiffCrossFilter
+  }
+}
+
+export function setBarchartPercentDiffs (diffsArray, countArray) {
+  let percentDiffArray
+  if (countArray) {
+    percentDiffArray = diffsArray.map((value, index, matrix) => {
+      let count = countArray.get(index)
+      if (count && count > 0) {
+        return (value / count)
+      } else {
+        return 0
+      }
+    })
+  } else {
+    percentDiffArray = diffsArray
+  }
+  let hoursForCrossFilter = []
+  percentDiffArray.forEach((percentDiff, index) => {
+    hoursForCrossFilter.push({
+      'dayOfWeek': index[0] + 1,
+      'hourOfDay': index[1] + 1,
+      'percentDiffThisHour': percentDiff
     })
   })
   return {
     type: ADD_SEGMENTS_TO_BARCHART,
-    speedsBinnedByHour: hoursForCrossFilter
+    percentDiffsBinnedByHour: hoursForCrossFilter
   }
 }

src/store/actions/barchart.js

@@ -1,6 +1,7 @@
 import { CLEAR_BARCHART, ADD_SEGMENTS_TO_BARCHART } from '../actions'
 
 const initialState = {
+  percentDiffsBinnedByHour: [],
   speedsBinnedByHour: []
 }
 
@@ -9,12 +10,14 @@ const barchart = (state = initialState, action) => {
     case CLEAR_BARCHART:
       return {
         ...state,
-        speedsBinnedByHour: []
+        speedsBinnedByHour: [],
+        percentDiffsBinnedByHour: []
       }
     case ADD_SEGMENTS_TO_BARCHART:
       return {
         ...state,
-        speedsBinnedByHour: action.speedsBinnedByHour
+        speedsBinnedByHour: action.speedsBinnedByHour,
+        percentDiffsBinnedByHour: action.percentDiffsBinnedByHour
       }
     default:
       return state