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:11:23 +01:00
|
|
|
<title>Live Heatmap with Continuous Scrolling</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:20:38 +01:00
|
|
|
.y-axis {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2024-11-21 20:39:49 +01:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-11-21 21:11:23 +01:00
|
|
|
<h2>Live Heatmap with Continuous Scrolling</h2>
|
2024-11-21 20:39:49 +01:00
|
|
|
<div id="chart"></div>
|
|
|
|
|
|
|
|
|
|
<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
|
|
|
|
|
|
|
|
// 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()
|
|
|
|
|
.domain(d3.range(10)) // Example: 10 categories
|
|
|
|
|
.range([0, width]);
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
// Heatmap color scale
|
|
|
|
|
const colorScale = d3.scaleSequential(d3.interpolateYlOrRd)
|
|
|
|
|
.domain([0, 100]); // Adjust for event intensity
|
2024-11-21 20:39:49 +01:00
|
|
|
|
2024-11-21 21:08:35 +01:00
|
|
|
// Axis
|
|
|
|
|
const yAxis = svg.append("g")
|
|
|
|
|
.attr("class", "y-axis")
|
2024-11-21 21:11:23 +01:00
|
|
|
.call(d3.axisLeft(y).ticks(6));
|
2024-11-21 20:39:49 +01:00
|
|
|
|
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
|
|
|
|
|
.attr("fill", d => colorScale(d.value))
|
|
|
|
|
.merge(cells) // Merge updates
|
|
|
|
|
.attr("y", d => y(new Date(d.timestamp)))
|
|
|
|
|
.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
|
|
|
|
|
const pixelsPerMillisecond = scrollingSpeed / 1000;
|
|
|
|
|
|
|
|
|
|
function generateData() {
|
2024-11-21 21:08:35 +01:00
|
|
|
const newData = Array.from({ length: 10 }, (_, i) => ({
|
|
|
|
|
id: `${Date.now()}-${i}`,
|
|
|
|
|
category: i,
|
|
|
|
|
timestamp: Date.now(),
|
|
|
|
|
value: Math.random() * 100,
|
|
|
|
|
}));
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
// Smoothly shift axis
|
|
|
|
|
yAxis.call(d3.axisLeft(y).ticks(6));
|
|
|
|
|
});
|
2024-11-21 20:39:49 +01:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
2024-11-21 21:20:38 +01:00
|
|
|
|
