feat: add basic grid updates

Signed-off-by: kjuulh <contact@kjuulh.io>
2024-11-21 20:39:49 +01:00 · 2024-11-21 20:39:49 +01:00 · fa3cc87b9b
commit fa3cc87b9b
1 changed files with 111 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Live Timeline Heatmap</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <style>
+        .heatmap rect {
+            //stroke: #aaa;
+        }
+    </style>
+</head>
+<body>
+    <h2>Live Timeline Heatmap</h2>
+    <div id="chart"></div>
+
+    <script>
+        // Configuration
+        const width = 500;
+        const height = 500;
+        const numCols = 10; // Number of columns
+        const numRows = 20; // Number of rows
+        const cellWidth = width / numCols; // Cell width
+        const cellHeight = height / numRows; // Cell height
+        const fadeOutRate = 0.8; // Intensity decay
+        const maxIntensity = 10; // Maximum intensity value
+
+        // Create SVG
+        const svg = d3.select("#chart")
+            .append("svg")
+            .attr("width", width)
+            .attr("height", height)
+            .append("g")
+            .attr("class", "heatmap");
+
+        // Initialize grid
+        let grid = Array.from({ length: numRows }, () =>
+            Array.from({ length: numCols }, () => 0)
+        );
+
+        // Color scale
+        const colorScale = d3.scaleSequential(d3.interpolateTurbo).domain([0, maxIntensity]);
+
+        // Create grid rectangles
+        svg.selectAll("rect")
+            .data(grid.flat())
+            .enter()
+            .append("rect")
+            .attr("x", (_, i) => (i % numCols) * cellWidth)
+            .attr("y", (_, i) => Math.floor(i / numCols) * cellHeight)
+            .attr("width", cellWidth)
+            .attr("height", cellHeight)
+            .attr("fill", colorScale(0));
+
+        // Function to update the heatmap
+        function updateHeatmap() {
+            // Decay old values
+            for (let row of grid) {
+                for (let col = 0; col < row.length; col++) {
+                    row[col] *= fadeOutRate;
+                }
+            }
+
+            // Update heatmap colors
+            svg.selectAll("rect")
+                .data(grid.flat())
+                .transition()
+                .duration(200)
+                .attr("fill", d => colorScale(d));
+        }
+
+        // Scroll rows upward and add a new empty row at the bottom
+        function scrollHeatmap() {
+            grid.shift(); // Remove the top row
+            grid.push(Array.from({ length: numCols }, () => 0)); // Add an empty row at the bottom
+
+            // Update grid positions
+            svg.selectAll("rect")
+                .data(grid.flat())
+                .transition()
+                .duration(200)
+                .attr("y", (_, i) => Math.floor(i / numCols) * cellHeight);
+        }
+
+        // Function to add events to the bottom row
+        function addEvent(col, intensity) {
+            if (col >= 0 && col < numCols) {
+                grid[grid.length - 1][col] = Math.min(
+                    grid[grid.length - 1][col] + intensity,
+                    maxIntensity
+                );
+            }
+        }
+
+        // Simulate incoming events
+        setInterval(() => {
+            const randomCol = Math.floor(Math.random() * numCols);
+            const randomIntensity = Math.random() * 8 + 2; // Random intensity (2-10)
+            addEvent(randomCol, randomIntensity);
+        }, 300); // Events every 300ms
+
+        // Animation loop
+        d3.interval(() => {
+            scrollHeatmap();
+            updateHeatmap();
+        }, 500); // Updates every 500ms
+    </script>
+</body>
+</html>
+