From 97c0adaa3b0e84c8befaac483b16a1aa13b80540 Mon Sep 17 00:00:00 2001 From: kjuulh Date: Thu, 21 Nov 2024 21:31:01 +0100 Subject: [PATCH] feat: pretty close Signed-off-by: kjuulh --- index.html | 46 +++++++++++++++++++++++++++------------------- 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 6cffe6b..96dc7e1 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,15 @@ - Live Heatmap with Intensity + Space-Themed Heatmap -

Live Heatmap with Intensity

+

Space-Themed Continuous Heatmap

@@ -41,16 +50,16 @@ // Categories with labels const categories = [ - { id: 0, label: "User Onboarded", color: "#1f77b4" }, - { id: 1, label: "Payment Accepted", color: "#ff7f0e" }, - { id: 2, label: "Payment Failed", color: "#d62728" }, - { id: 3, label: "Product Added to Cart", color: "#9467bd" }, - { id: 4, label: "Checkout Started", color: "#2ca02c" }, - { id: 5, label: "Order Placed", color: "#8c564b" }, - { id: 6, label: "Order Cancelled", color: "#e377c2" }, - { id: 7, label: "Refund Processed", color: "#7f7f7f" }, - { id: 8, label: "Subscription Renewed", color: "#bcbd22" }, - { id: 9, label: "Feedback Submitted", color: "#17becf" }, + { id: 0, label: "User Onboarded", color: "#FFD700" }, + { id: 1, label: "Payment Accepted", color: "#00BFFF" }, + { id: 2, label: "Payment Failed", color: "#FF4500" }, + { id: 3, label: "Product Added to Cart", color: "#9400D3" }, + { id: 4, label: "Checkout Started", color: "#32CD32" }, + { id: 5, label: "Order Placed", color: "#8B4513" }, + { id: 6, label: "Order Cancelled", color: "#FF69B4" }, + { id: 7, label: "Refund Processed", color: "#A9A9A9" }, + { id: 8, label: "Subscription Renewed", color: "#BDB76B" }, + { id: 9, label: "Feedback Submitted", color: "#00FFFF" }, ]; // Store last intensity for each category @@ -96,7 +105,7 @@ .attr("x", d => x(d.category)) .attr("width", x.bandwidth()) .attr("y", d => y(new Date(d.timestamp))) - .attr("height", 5) // Fixed height for heatmap blocks + .attr("height", 4) // Minimized spacing between blocks .attr("fill", d => categories[d.category].color) .attr("opacity", d => d.intensity) .merge(cells) // Merge updates @@ -114,12 +123,12 @@ // Real-time simulation let allData = []; - const scrollingSpeed = 10; // Pixels per second + const scrollingSpeed = 20; // Pixels per second function generateData() { // Simulate sporadic events with intensity const newData = categories.map(c => { - if (Math.random() < 0.5) return null; // 50% chance no data for this category + if (Math.random() < 0.7) return null; // 70% chance no data for this category const newIntensity = Math.random(); // Random intensity const smoothIntensity = d3.interpolate(lastIntensity.get(c.id), newIntensity)(0.5); // Smooth transition lastIntensity.set(c.id, smoothIntensity); // Update last intensity @@ -144,8 +153,8 @@ const now = Date.now(); const delta = now - lastTimestamp; - // Generate data periodically (every 1 second) - if (delta >= 1000) { + // Generate data periodically (every 500ms for more activity) + if (delta >= 500) { generateData(); lastTimestamp = now; } @@ -161,4 +170,3 @@ -