2024-11-21 20:39:49 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2024-11-21 21:25:29 +01:00
|
|
|
<title>Live Heatmap with Intensity</title>
|
2024-11-21 20:39:49 +01:00
|
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
|
|
|
<style>
|
2024-11-21 21:08:35 +01:00
|
|
|
svg {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: auto;
|
2024-11-21 20:39:49 +01:00
|
|
|
}
|
2024-11-21 21:25:29 +01:00
|
|
|
|
|
|
|
|
.legend {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend-color {
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 15px;
|
|
|
|
|
margin-right: 5px;
|
2024-11-21 21:20:38 +01:00
|
|
|
}
|
2024-11-21 20:39:49 +01:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-11-21 21:25:29 +01:00
|
|
|
<h2>Live Heatmap with Intensity</h2>
|
2024-11-21 20:39:49 +01:00
|
|
|
<div id="chart"></div>
|
2024-11-21 21:25:29 +01:00
|
|
|
<div id="legend" class="legend"></div>
|
2024-11-21 20:39:49 +01:00
|
|
|
|
|
|
|
|
<script>
|
2024-11-21 21:08:35 +01:00
|
|
|
// Dimensions
|
|
|
|
|
const margin = { top: 20, right: 20, bottom: 20, left: 50 };
|
|
|
|
|
const width = 800 - margin.left - margin.right;
|
|
|
|
|
const height = 500 - margin.top - margin.bottom;
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:25:29 +01:00
|
|
|
// 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" },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// Store last intensity for each category
|
|
|
|
|
const lastIntensity = new Map(categories.map(c => [c.id, Math.random()]));
|
|
|
|
|
|
|
|
|
|
// Create Legend
|
|
|
|
|
const legend = d3.select("#legend");
|
|
|
|
|
categories.forEach(category => {
|
|
|
|
|
const item = legend.append("div").attr("class", "legend-item");
|
|
|
|
|
item.append("div")
|
|
|
|
|
.attr("class", "legend-color")
|
|
|
|
|
.style("background-color", category.color);
|
|
|
|
|
item.append("span").text(category.label);
|
|
|
|
|
});
|
|
|
|
|
|
2024-11-21 20:39:49 +01:00
|
|
|
// Create SVG
|
|
|
|
|
const svg = d3.select("#chart")
|
|
|
|
|
.append("svg")
|
2024-11-21 21:08:35 +01:00
|
|
|
.attr("width", width + margin.left + margin.right)
|
|
|
|
|
.attr("height", height + margin.top + margin.bottom)
|
2024-11-21 20:39:49 +01:00
|
|
|
.append("g")
|
2024-11-21 21:08:35 +01:00
|
|
|
.attr("transform", `translate(${margin.left},${margin.top})`);
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
// Time scales
|
|
|
|
|
const y = d3.scaleTime()
|
|
|
|
|
.domain([new Date(Date.now() - 60000), new Date()]) // Past 1 min to now
|
|
|
|
|
.range([height, 0]);
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
const x = d3.scaleBand()
|
2024-11-21 21:25:29 +01:00
|
|
|
.domain(categories.map(c => c.id)) // Category IDs
|
2024-11-21 21:08:35 +01:00
|
|
|
.range([0, width]);
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:25:29 +01:00
|
|
|
// Heatmap group
|
2024-11-21 21:08:35 +01:00
|
|
|
const grid = svg.append("g");
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
// Initialize heatmap
|
|
|
|
|
function updateHeatmap(data) {
|
|
|
|
|
const cells = grid.selectAll("rect").data(data, d => d.id);
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
// Enter new data
|
|
|
|
|
cells.enter()
|
|
|
|
|
.append("rect")
|
|
|
|
|
.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
|
2024-11-21 21:25:29 +01:00
|
|
|
.attr("fill", d => categories[d.category].color)
|
|
|
|
|
.attr("opacity", d => d.intensity)
|
2024-11-21 21:08:35 +01:00
|
|
|
.merge(cells) // Merge updates
|
|
|
|
|
.attr("y", d => y(new Date(d.timestamp)))
|
2024-11-21 21:25:29 +01:00
|
|
|
.attr("opacity", d => d.intensity)
|
2024-11-21 21:08:35 +01:00
|
|
|
.attr("visibility", d =>
|
|
|
|
|
y(new Date(d.timestamp)) >= 0 && y(new Date(d.timestamp)) <= height
|
|
|
|
|
? "visible"
|
|
|
|
|
: "hidden"
|
2024-11-21 21:11:23 +01:00
|
|
|
);
|
2024-11-21 21:08:35 +01:00
|
|
|
|
|
|
|
|
// Remove old data that moves off the screen
|
|
|
|
|
cells.exit().remove();
|
2024-11-21 20:39:49 +01:00
|
|
|
}
|
|
|
|
|
|
2024-11-21 21:11:23 +01:00
|
|
|
// Real-time simulation
|
2024-11-21 21:08:35 +01:00
|
|
|
let allData = [];
|
2024-11-21 21:11:23 +01:00
|
|
|
const scrollingSpeed = 10; // Pixels per second
|
|
|
|
|
|
|
|
|
|
function generateData() {
|
2024-11-21 21:25:29 +01:00
|
|
|
// Simulate sporadic events with intensity
|
|
|
|
|
const newData = categories.map(c => {
|
|
|
|
|
if (Math.random() < 0.5) return null; // 50% 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
|
|
|
|
|
return {
|
|
|
|
|
id: `${Date.now()}-${c.id}`,
|
|
|
|
|
category: c.id,
|
|
|
|
|
timestamp: Date.now(),
|
|
|
|
|
intensity: smoothIntensity,
|
|
|
|
|
};
|
|
|
|
|
}).filter(Boolean); // Remove null values
|
2024-11-21 21:08:35 +01:00
|
|
|
|
2024-11-21 21:20:38 +01:00
|
|
|
// Append new data and remove older ones beyond the last 60 seconds
|
2024-11-21 21:08:35 +01:00
|
|
|
allData = [...allData, ...newData].filter(d =>
|
|
|
|
|
new Date(d.timestamp) >= new Date(Date.now() - 60000)
|
|
|
|
|
);
|
2024-11-21 21:11:23 +01:00
|
|
|
}
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:11:23 +01:00
|
|
|
// Continuous scroll
|
2024-11-21 21:20:38 +01:00
|
|
|
let lastTimestamp = Date.now();
|
|
|
|
|
|
2024-11-21 21:11:23 +01:00
|
|
|
d3.timer(elapsed => {
|
2024-11-21 21:20:38 +01:00
|
|
|
const now = Date.now();
|
|
|
|
|
const delta = now - lastTimestamp;
|
|
|
|
|
|
2024-11-21 21:11:23 +01:00
|
|
|
// Generate data periodically (every 1 second)
|
2024-11-21 21:20:38 +01:00
|
|
|
if (delta >= 1000) {
|
2024-11-21 21:11:23 +01:00
|
|
|
generateData();
|
2024-11-21 21:20:38 +01:00
|
|
|
lastTimestamp = now;
|
2024-11-21 21:11:23 +01:00
|
|
|
}
|
2024-11-21 21:08:35 +01:00
|
|
|
|
2024-11-21 21:11:23 +01:00
|
|
|
// Update the domain of the y-axis
|
2024-11-21 21:20:38 +01:00
|
|
|
const currentTime = new Date();
|
|
|
|
|
const pastTime = new Date(currentTime.getTime() - 60000);
|
|
|
|
|
y.domain([pastTime, currentTime]);
|
2024-11-21 21:11:23 +01:00
|
|
|
|
|
|
|
|
// Update positions of all heatmap cells
|
2024-11-21 21:08:35 +01:00
|
|
|
updateHeatmap(allData);
|
2024-11-21 21:11:23 +01:00
|
|
|
});
|
2024-11-21 20:39:49 +01:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
2024-11-21 21:20:38 +01:00
|
|
|
|
