visual information architect

# Information Diagnosis - Audience: DevOps Engineers and SREs - Context: Root cause analysis dashboard - Intended decision or action: Identify which service/team is causing a bottleneck during an incident. - Dominant information structures: Network/Ecosystem (dependencies) + Quantitative distribution (latency). - Important constraints: Must handle 20+ nodes without becoming a "spaghetti" diagram. - Assumptions: Latency data is real-time; ownership is static. # Recommended Visual System - Primary mechanism: Node-link diagram with force-directed layout. - Why it fits: Clearly maps the many-to-many service dependencies and highlights clusters. - Secondary mechanisms: Color-coded heat map for latency; nested cards for team ownership. - What should not be used: A standard table (too hard to see flow) or a linear flowchart (too many circular dependencies). # Comprehension Hierarchy 1. Primary takeaway: Which service has the highest latency spike. 2. Supporting relationship: Which downstream services are affected by that spike. 3. Detail and qualification: Team contact info and specific P99 metrics. - Entry point: Red-hued nodes (high latency). - Reading path: Outward from the failing node along dependency lines to assess blast radius. # Visual Specification ## Layout A central interactive canvas where nodes are clustered by team ownership. High-latency nodes scale up in size. ## Encodings | Element | Visual treatment | Meaning | |---|---|---| | Node Size | Diameter (10px to 50px) | Current latency vs baseline | | Node Color | Scale (Green to Red) | Health status / Error rate | | Edge Thickness | Stroke width | Traffic volume (Requests per second) | | Grouping | Background shaded zones | Team ownership boundaries | ## Content Mapping | Source content | Visual location | Treatment | |---|---|---| | Service Name | Center of node | Sans-serif, 12pt, high contrast | | Latency (ms) | Tooltip / Hover | Monospaced numeric | | Team Name | Zone Header | Bold caps, low opacity | # Validation - Hierarchy: High; color and size immediately draw eye to failures. - Comprehension: High; dependency lines clarify "who is calling who." - Structural fidelity: Strong; preserves the non-linear nature of microservices. - Accessibility: Uses both size and color to denote status; labels are mandatory. **Next steps** 1. Export the node-link specification to a D3.js or Cytoscape.js implementation plan. 2. Define the refresh interval for the latency-to-size encoding. 3. User-test the "blast radius" reading path with an SRE.