Static network diagrams are obsolete the minute you finish drawing them. You spend hours in Visio or draw.io making clean boxes and lines, and a week later you add a VLAN, spin up three Docker containers, move a switch port, and your diagram is a historical relic.
I wanted a living, breathing view of my environment—something that looks like a sci-fi command console, updates itself continuously, and alerts me visually when something breaks. I call it Lab OS: a real-time, interactive network topology map rendered in D3.js that pulls live telemetry from our UniFi controller, Hyper-V, XCP-ng, and Zabbix. Here is how I built it and how it works.
1. The Concept: Physics-Based Force Directed Graphs
Instead of manually placing icons on a grid, Lab OS treats the entire network as a physical simulation using D3’s force-directed layout engine (d3-force):
- Nodes (Devices & Hosts): Every physical switch, hypervisor, storage array, virtual machine, and smart-home endpoint is a node with mass and repulsive charge.
- Links (Cables & Virtual Bridges): Physical Ethernet patch cables, 10GbE SFP+ DAC lines, and hypervisor vSwitches are spring-like links connecting nodes.
- Auto-Balancing: When the browser opens, nodes naturally push apart until the network reaches visual equilibrium. Core switches sit in the center, hypervisors cluster around them, and virtual machines orbit their parent hosts.
2. The Telemetry Ingestion Engine
A diagram without live data is just art. Lab OS runs a lightweight Python backend daemon that polls our lab’s core APIs every few seconds and feeds a unified JSON graph to the browser via WebSockets:
| Data Source | API Endpoint / Method | Telemetry Pulled |
|---|---|---|
| UniFi Controller | UDM Pro WebSocket / REST | Switch port link speed (1GbE vs 10GbE), PoE wattage draw, link status |
| Zabbix 7.0 | JSON-RPC (trigger.get) |
Active problem triggers, severity levels, host reachability |
| Docker & Hyper-V | Docker Engine Socket & WMI | Running container counts, CPU utilization, memory pressure |
3. Visualizing Network Flow in Real Time
To make the graph genuinely useful for diagnostics, I added visual animations to the links and nodes:
- Animated Packet Particles: Small glowing particles travel along links between nodes. The particle speed and density scale dynamically with active interface throughput. If our EqualLogic SAN is pulling a heavy backup over VLAN 99, the lines between
XCPNG-R710-01and the SAN array light up with rapid particle streams. - Health Status Pulses: Healthy nodes glow with a calm green accent. When Zabbix detects an issue—say, a disk volume exceeds 90% or a collector stops reporting—the node immediately pulses bright amber or red and ripples outward.
- One-Click Drilldown: Clicking any node opens a slide-out HUD panel displaying live CPU graphs, IP addresses, MAC addresses, open ports, and a direct link to that host’s management interface (or an SSH launch command).
4. Running the HUD in the Lab
Lab OS runs full-time on a dedicated portrait monitor above my primary workstation (DEATHSTAR) on local port :8200. When I walk into my office in the morning, I don’t have to log into five separate consoles to verify lab health. One glance at the graph tells me if the SAN is balanced, switches are clean, and all 10 VLANs are operating normally.
It turns network documentation from a tedious chore into an operational command center. In a future post, I’ll share the exact D3 physics configuration and how to bind UniFi switch port topology into SVG hierarchies.