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 @@