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; display: block;
margin: auto; margin: auto;
} }
.y-axis {
display: none;
}
</style> </style>
</head> </head>
<body> <body>
@ -87,22 +90,29 @@
value: Math.random() * 100, value: Math.random() * 100,
})); }));
// Append new data and remove older ones beyond the last 60 seconds
allData = [...allData, ...newData].filter(d => allData = [...allData, ...newData].filter(d =>
new Date(d.timestamp) >= new Date(Date.now() - 60000) new Date(d.timestamp) >= new Date(Date.now() - 60000)
); );
} }
// Continuous scroll // Continuous scroll
let lastTimestamp = Date.now();
d3.timer(elapsed => { d3.timer(elapsed => {
const now = Date.now();
const delta = now - lastTimestamp;
// Generate data periodically (every 1 second) // Generate data periodically (every 1 second)
if (Math.floor(elapsed) % 1000 === 0) { if (delta >= 1000) {
generateData(); generateData();
lastTimestamp = now;
} }
// Update the domain of the y-axis // Update the domain of the y-axis
const now = new Date(); const currentTime = new Date();
const past = new Date(now.getTime() - 60000); const pastTime = new Date(currentTime.getTime() - 60000);
y.domain([past, now]); y.domain([pastTime, currentTime]);
// Update positions of all heatmap cells // Update positions of all heatmap cells
updateHeatmap(allData); updateHeatmap(allData);
@ -113,3 +123,4 @@
</script> </script>
</body> </body>
</html> </html>