kjuulh/iamvisual
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pretty close

Browse Source 
Signed-off-by: kjuulh <contact@kjuulh.io>
This commit is contained in:
Kasper Juul Hermansen 2024-11-21 21:31:01 +01:00
parent e424fa2d03
commit 97c0adaa3b
Signed by: kjuulh
GPG Key ID: D85D7535F18F35FA
1 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
index.html
View File

@ -3,9 +3,15 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Heatmap with Intensity</title>
<title>Space-Themed Heatmap</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
}
svg {
display: block;
margin: auto;
@ -13,12 +19,15 @@
.legend {
font-size: 12px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 5px;
margin: 5px;
}
.legend-color {
@ -29,7 +38,7 @@
</style>
</head>
<body>
<h2>Live Heatmap with Intensity</h2>
<h2>Space-Themed Continuous Heatmap</h2>
<div id="chart"></div>
<div id="legend" class="legend"></div>
@ -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 @@
</script>
</body>
</html>