live-traffic

Visualize live traffic where sources and destinations are fluid — they come and go. Nodes appear dynamically as new IPs arrive in the traffic stream, grow with activity (sqrt(totalRequests) * 2.5), and label fontSize scales with node radius (minimum 8px, scale factor 1.0x radius).

• LiveFeed — data ingestion layer wrapping a traffic generator, emits batches on a configurable timer with ±50% jitter
• NodeRegistry — tracks per-source/destination request counts and last-seen timestamps for activity-based sizing
• Mock data generator — 35 sources, 43 destinations, power-law weighted traffic, gradual node discovery, burst events
• Shape classes — BaseShape → CircleShape, SquareShape, HexagonShape, BlobShape, SquircleShape (carried from c4)

• Dynamic node discovery — sources/destinations created on-the-fly as new IPs appear
• Activity-based sizing — node radius grows with request count, shapes redrawn live
• Auto-zoom — fitToContent() scales the scene to fill available viewport height, allowing upscaling up to 3x with animated transitions (400ms ease)
• High-res labels — text rendered at 3x resolution to stay crisp under auto-zoom
• Pulse line modes — straight, isometric (default), and curved (quadratic bezier with random per-pulse curvature direction and intensity)
• Animated relayout — new nodes trigger RAF-batched relayout; existing nodes tween, new nodes snap
• Pulse lines follow nodes — redrawn per-frame via app.ticker during relayout animations
• Label modes — off, hover, active (show on blink then fade after 6s), always
• Layout selectors — grid, packed-grid, pyramid, circular for sources; arc, grid for destinations
• Generation controls — speed (0–2000ms, default 500ms), batch size, discovery rate, burst chance, hotness
• Zoom/pan — scroll-to-zoom (cursor-aware), click-drag pan with 4px dead zone