🌍🚉 Checkpoint

./public/index.js:1954897/158649

db.csv

@@ -388,3 +388,50 @@ ECSW,1636906463056,5
 ECSW,1636906476863,6
 ECSW,1636906490469,4
 ECSW,1636906504649,6
+ECSW,1636906540848,6
+ECSW,1636906554507,4
+ECSW,1636906600840,6
+ECSW,1636906614155,6
+ECSW,1636906629486,2
+ECSW,1636906642637,2
+ECSW,1636906655866,2
+ECSW,1636906669395,2
+ECSW,1636906682466,2
+ECSW,1636906695661,2
+ECSW,1636906709339,2
+ECSW,1636906722837,2
+ECSW,1636906736324,2
+ECSW,1636906749666,2
+ECSW,1636906762902,2
+ECSW,1636906776813,2
+ECSW,1636906790058,2
+ECSW,1636906803281,2
+ECSW,1636906816349,2
+ECSW,1636906829838,2
+ECSW,1636906843057,2
+ECSW,1636906856221,2
+ECSW,1636906870056,2
+ECSW,1636906883624,2
+ECSW,1636906897729,2
+ECSW,1636906911357,2
+ECSW,1636906924554,2
+ECSW,1636906937665,2
+ECSW,1636906950757,2
+ECSW,1636906964104,2
+ECSW,1636906977738,2
+ECSW,1636906991093,2
+ECSW,1636907005284,2
+ECSW,1636907018373,2
+ECSW,1636907031963,2
+ECSW,1636907045187,2
+ECSW,1636907059045,2
+ECSW,1636907072114,2
+ECSW,1636907085301,2
+ECSW,1636907098712,2
+ECSW,1636907112432,2
+ECSW,1636907125754,2
+ECSW,1636907138866,2
+ECSW,1636907151813,2
+ECSW,1636907165563,2
+ECSW,1636907179017,2
+ECSW,1636907193061,2

public/index.js

@@ -35,6 +35,8 @@ const map = L.map('map', {
     maxZoom: 18
 }).setView([32.98613, -96.75042], 18)
 
+const INTERVAL = 10 * 60 * 1000
+const STEP = 2 * 60 * 1000
 
 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
     maxZoom: 18,
@@ -71,7 +73,7 @@ setTimeout(drawRegions, 60 * 1000)
 async function drawRegions() {
     const data = await getData()
 
-    const ecsw = data.filter(d => d.loc === 'ECSW' && Date.now() - d.time < 60 * 60 * 1000)
+    const ecsw = data.filter(d => d.loc === 'ECSW' && Date.now() - d.time < INTERVAL)
 
     console.log(ecsw)
 
@@ -89,17 +91,15 @@ async function drawRegions() {
     console.log({current, max, min})
     const color = red.interpolate(green, current / (max - min))
 
-    console.log(color)
-
-    buildings.ECSW.poly.setStyle({ color })
+    buildings.ECSW.poly.setStyle({ color: color.asRgbCss() })
     console.log({avg, current, delta, color})
 }
 
 class Color {
     constructor(r, g, b) {
-        this.r = Math.ceil(0, Math.floor(255, r))
-        this.g = Math.ceil(0, Math.floor(255, g))
-        this.b = Math.ceil(0, Math.floor(255, b))
+        this.r = Math.max(0, Math.min(255, r))
+        this.g = Math.max(0, Math.min(255, g))
+        this.b = Math.max(0, Math.min(255, b))
     }
     asRgbCss() {
         return "rgb("+this.r+", "+this.g+", "+this.b+")"
@@ -129,7 +129,7 @@ function lerp(v0, v1, x) {
 
 
 async function displayCard(id) {
-    const data = (await getData()).filter(d => d.loc === id && Date.now() - d.time < 60 * 60 * 1000)
+    const data = (await getData()).filter(d => d.loc === id && Date.now() - d.time < INTERVAL)
     const card = document.getElementById("card")
     await card.animate([
         { transform: 'translateY(50px)', opacity: "0" },
@@ -152,6 +152,8 @@ async function displayCard(id) {
     // const green = new Color(0, 255, 0)
     // const color = red.interpolate(green, current / (max - min))
 
+    console.log(delta)
+
     const msg = Number.isNaN(delta)
         ? "No data..."
         : (busy ? "Busier than usual": "Not as busy :)")
@@ -175,9 +177,8 @@ async function displayCard(id) {
 
 function updateChart(data) {
     const parsed = data.map(d => {
-        const TEN_MINUTES = 10 * 60 * 1000
         // this is 0-5
-        let ago = Math.floor((Date.now() - d.time) / TEN_MINUTES)
+        let ago = Math.floor((Date.now() - d.time) / STEP)
         // if (20 < ago) ago = 20
         return {time: d.time, ago, count: d.count}
     }).reduce((acc, v) => {
@@ -192,7 +193,12 @@ function updateChart(data) {
     })
 
     const ctx = document.getElementById('myChart').getContext('2d')
-    const labels = ['Now', '10m ago', '20m ago', '30m ago', '40m ago', '50m ago'].reverse()
+
+    const min = STEP / 1000 / 60
+
+    const labels = [
+        'Now', `${min}m ago`, `${min * 2}m ago`, `${min * 3}m ago`, `${min * 4}m ago`, `${min * 5}m ago`
+    ].reverse()
 
     new Chart(ctx, {
         type: 'line',