From d5d1a30a4c94a2aada8cd3d3423e0e0f6e014a0e Mon Sep 17 00:00:00 2001 From: kjuulh Date: Thu, 21 Nov 2024 21:20:38 +0100 Subject: [PATCH] feat: working scrolling example Signed-off-by: kjuulh --- index.html | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index a51fbc2..4659b1a 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,9 @@ display: block; margin: auto; } + .y-axis { + display: none; + } @@ -87,22 +90,29 @@ value: Math.random() * 100, })); + // Append new data and remove older ones beyond the last 60 seconds allData = [...allData, ...newData].filter(d => new Date(d.timestamp) >= new Date(Date.now() - 60000) ); } // Continuous scroll + let lastTimestamp = Date.now(); + d3.timer(elapsed => { + const now = Date.now(); + const delta = now - lastTimestamp; + // Generate data periodically (every 1 second) - if (Math.floor(elapsed) % 1000 === 0) { + if (delta >= 1000) { generateData(); + lastTimestamp = now; } // Update the domain of the y-axis - const now = new Date(); - const past = new Date(now.getTime() - 60000); - y.domain([past, now]); + const currentTime = new Date(); + const pastTime = new Date(currentTime.getTime() - 60000); + y.domain([pastTime, currentTime]); // Update positions of all heatmap cells updateHeatmap(allData); @@ -113,3 +123,4 @@ +