diff --git a/simple_analysis/templates/simple_analysis/simple_analysis.html b/simple_analysis/templates/simple_analysis/simple_analysis.html index 39e0117..603c685 100644 --- a/simple_analysis/templates/simple_analysis/simple_analysis.html +++ b/simple_analysis/templates/simple_analysis/simple_analysis.html @@ -2641,10 +2641,15 @@ function loadTrafficData() { // If only 1-2 real windows, split edges into artificial windows for crossfade variety if (wins.length <= 2 && wins.length > 0) { const allEdges = []; - wins.forEach(w => (w.edges||[]).forEach(e => allEdges.push({...e}))); - // Sort by count descending, split into groups of ~60 edges + const seen = new Set(); + wins.forEach(w => (w.edges||[]).forEach(e => { + const k = e.source + '|' + e.target; + if (!seen.has(k)) { seen.add(k); allEdges.push({...e}); } + })); allEdges.sort((a,b) => (b.count||0) - (a.count||0)); - const groupSize = Math.max(40, Math.ceil(allEdges.length / 8)); + // More windows with fewer edges each = more visible change + const nWindows = Math.min(20, Math.ceil(allEdges.length / 20)); + const groupSize = Math.max(15, Math.ceil(allEdges.length / nWindows)); const newWins = []; let ti = minTs; for (let g = 0; g < allEdges.length; g += groupSize) { @@ -2828,15 +2833,16 @@ function renderTrafficCrossfade() { _trafficEdgeCache[e.source+'|'+e.target] = cached; } if (!cached) return; - const ratio = e.count / maxCount; - const alpha = 0.3 + 0.6 * e.weight * ratio; + const ratio = Math.min(1, e.count / maxCount); + const alpha = 0.4 + 0.6 * e.weight; + const hue = 220 + (mix.i % 10) * 15; // color shifts per window group // Bezier trace ctx.beginPath(); ctx.moveTo(cached.p1x, cached.p1y); ctx.quadraticCurveTo(cached.midX, cached.midY, cached.p2x, cached.p2y); - ctx.strokeStyle = 'rgba(67,97,238,' + alpha.toFixed(2) + ')'; - ctx.lineWidth = 1 + 4 * ratio; + ctx.strokeStyle = 'hsla(' + hue + ',70%,50%,' + alpha.toFixed(2) + ')'; + ctx.lineWidth = 1.5 + 3 * ratio; ctx.stroke(); // Particles (continuous, driven by Date.now)