https://wgnrto.github.io/publication_types/umap/UmapHugo Blox Builder (https://hugoblox.com)en-usTue, 02 Jun 2026 00:00:00 +0000https://wgnrto.github.io/media/icon_hu_827450d54e8da75a.pnghttps://wgnrto.github.io/publication_types/umap/https://wgnrto.github.io/publication/wagner-2026-engazement/Tue, 02 Jun 2026 00:00:00 +0000https://wgnrto.github.io/publication/wagner-2026-engazement/ <div id="data-visualizer"></div> <style> data-visualizer { min-width: 100%; height: 200px } </style> <script src="https://cdn.jsdelivr.net/npm/p5@1.9.4/lib/p5.min.js"></script> <script> (() => { const host = document.getElementById('data-visualizer'); if (!host || window.__engazementSketchLoaded) { return; } window.__engazementSketchLoaded = true; const sampleUrl = '/publication/wagner-2026-engazement/processed-sample.csv'; const bounds = { tMax: 604.1925, }; const palette = { valid: [54, 94, 160], l_valid: [54, 94, 160], r_valid: [54, 94, 160], invalid: [150, 150, 150], }; const sketch = (p) => { const points = []; let loading = true; const clamp = (value, min, max) => Math.max(min, Math.min(max, value)); const mapValue = (value, min, max) => (value - min) / (max - min); const hashPid = (pid) => { const text = String(pid); let hash = 0; for (let i = 0; i < text.length; i += 1) { hash = ((hash << 5) - hash) + text.charCodeAt(i); hash |= 0; } return Math.abs(hash); }; const getPointColor = (pid) => { return '100, 0%, 100%'; }; const toViewportX = (value) => p.lerp(0, p.width, value); const toViewportY = (value) => p.lerp(p.height, 0, value); const loadData = (table) => { points.length = 0; const rows = table.getRows(); let previous = null; for (const row of rows) { const point = { pid: row.get('pid'), time: Number.parseFloat(row.get('time')), status: row.get('status'), x: Number.parseFloat(row.get('x_normalized')), y: Number.parseFloat(row.get('y_normalized')), }; if (!Number.isFinite(point.time) || !Number.isFinite(point.x) || !Number.isFinite(point.y)) { continue; } point.prev = previous && previous.pid === point.pid ? previous : null; points.push(point); previous = point; } loading = false; }; p.preload = () => { p.loadTable(sampleUrl, 'csv', 'header', loadData); }; p.setup = () => { const canvas = p.createCanvas(host.offsetWidth, 400); canvas.parent(host); p.colorMode(p.HSL); }; p.draw = () => { p.clear(); p.background(247, 244, 239, 0); if (loading || points.length === 0) { return; } const sweep = (p.frameCount * 0.0025) % 1; const activeBand = 0.08; p.noStroke(); for (let i = 0; i < points.length; i += 1) { const point = points[i]; const time = clamp(point.time / bounds.tMax, 0, 1); const activation = clamp(1 - Math.abs(time - sweep) / activeBand, 0, 1); if (activation <= 0.01) { continue; } const x = toViewportX(point.x); const y = toViewportY(point.y); const color = getPointColor(point.pid); const pulse = 0.7 + 0.3 * p.sin((point.time * 0.06) + i * 0.015); const alpha = 2 + activation * 10; p.fill('hsla(' + color + ',' + alpha * 0.03 + ')'); p.circle(x, y, 3 + activation * 7 * pulse); if (point.prev) { const previousTime = clamp(point.prev.time / bounds.tMax, 0, 1); const previousActivation = clamp(1 - Math.abs(previousTime - sweep) / activeBand, 0, 1); if (previousActivation > 0.01) { const previousX = toViewportX(point.prev.x); const previousY = toViewportY(point.prev.y); p.stroke('hsla(' + color + ',' + alpha * 0.03 + ')'); p.strokeWeight(1.1); p.line(previousX, previousY, x, y); } } } }; p.windowResized = () => { p.resizeCanvas(host.offsetWidth, 400); }; }; const loadScript = () => new Promise((resolve, reject) => { if (window.p5) { resolve(); return; } const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/p5@1.9.4/lib/p5.min.js'; script.async = true; script.onload = () => resolve(); script.onerror = reject; document.head.appendChild(script); }); const boot = async () => { try { await loadScript(); new p5(sketch); } catch (error) { console.error('Failed to start Engazement sketch', error); } }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot, { once: true }); } else { boot(); } })(); </script>