Layout Explore
Layout exploration — centered grid + circular arc, enhanced traffic data, smooth rendering
New in this cycle: Layout strategies compared — packed grid, pyramid, circular, grid, arc for both ends
Why
The visualization needed more realistic traffic data with wider variation (hot/cold sources and destinations), a layout that better conveys the hub-spoke nature of network traffic (sources in center, destinations radiating outward), and smoother circle rendering.
Objective
Explore layout options for hub-spoke traffic visualization with enhanced mock data.
Scope
dev/experiments/c2.layout-explore/
Key Changes
- New ArcLayout
fullCirclemode — destinations evenly around 360° with concentric ring overflow - Grid layout auto-centered from client count
- Arc radius computed dynamically from grid diagonal
- Enhanced mock data (1500 logs) with power-law weighted traffic distribution
- Circle rendering improved: soft outer glow ring + subtle stroke
- Canvas antialiasing enabled
Outcome
Grid renders as a square and centers properly within the arc ring. Three bugs found and fixed in grid dimension math (column formula bias, cell spacing too small, off-by-one centering). Also fixed direction-unaware pulse paths and added responsive canvas via ResizeObserver.
Visual record
9 captures — heroes, page slices, and full-page renders. Click to view.
