kjuulh/iamvisual
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: working scrolling example

Browse Source 
Signed-off-by: kjuulh <contact@kjuulh.io>
This commit is contained in:
Kasper Juul Hermansen 2024-11-21 21:20:38 +01:00
parent f31c9a7022
commit d5d1a30a4c
Signed by: kjuulh
GPG Key ID: D85D7535F18F35FA
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -10,6 +10,9 @@
display: block;
margin: auto;
}
.y-axis {
display: none;
}
</style>
</head>
<body>
@ -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 @@
</script>
</body>
</html>