Sankey Flow Visualization — AS-Path Particles, Role-Colored Nodes, BGP + Traffic Views

A traffic map that shows you 14 days of mean throughput as a bar chart is a coroner’s report. The Sankey view is an X-ray: where does traffic enter, which AS-path does it traverse, which role-class of host does it land on, and how is the volume distributed across that topology *right now*. RoutePulse renders both **BGP Sankey** (control plane — AS adjacencies and prefix flows) and **Traffic Sankey** (data plane — bytes from upstream → local ASN → destination ASN/prefix/app/country), with d3-force-driven animated particles that ride the AS-path edges at velocities proportional to live traffic volume.

Nodes are coloured by **Role Catalog** category (firewalls / web / mail / database / monitoring / DNS-NTP / IXP / transit / VPN-remote / virtualization-cloud / auth-directory / etc.) so the operator’s eye picks out the unexpected at a glance: a `database` node receiving traffic from a `transit_isp` upstream is a story; a `web` node behind the WAF is routine. Built on d3-sankey layout + React SVG + an HTML5 Canvas overlay for the particle system; 60fps with up to 3,000 active particles; initial render <500ms; layout recompute <50ms; bundle <40KB gzipped. Hover boosts the selected path to 0.7 opacity and dims others, with 2× particle speed for 300ms. Click any node or link to open a side-panel with traffic stats, protocol breakdown, top applications, and destination ports.

Two Sankey views — control plane + data plane

**BGP Sankey** — control-plane view rendering AS adjacencies, prefix counts per peer, and propagation paths through GOLINE’s transit + IXP fabric (SwissIX / MIX / MINAP). **Traffic Sankey** — data-plane view from upstream providers + IXP peers → local ASN (AS202032) → destination ASNs / prefixes / applications / countries. Both share the same particle engine, the same role-coloured node palette, and the same click-to-detail side-panel pattern; the operator switches between them with a single toggle.

d3-force particle engine — volume-proportional flow

Each link spawns particles at a rate proportional to its live bytes/sec. The Canvas overlay maintains up to 3,000 active particles at 60fps via a `requestAnimationFrame` loop, with d3-force driving the spline interpolation between sankey-laid nodes. Gradient colour interpolates from source-node hue to destination-node hue across the particle’s lifetime — the visual signature of a high-volume link is unmistakable.

Role-coloured nodes — Catalog-driven legend

Every destination node is coloured by its Role Catalog category (Section v4.28+). The legend is stable across all RoutePulse pages so the operator’s pattern recognition transfers from the Hosts page to the Sankey to the Map. Unexpected colour combinations on an edge are immediately diagnostic.

Controls — period, direction, depth, “Other” collapse

Time periods: 1h / 6h / 24h / 7d. Direction toggle: inbound / outbound / both. Depth slider 1–10 controlling granularity (depth 1 → top 3 sources+destinations, depth 10 → top 30). Paths below 0.5% of total volume auto-collapse into an “Other” node so the canvas stays readable on a 24h view. Responsive layout adapts cleanly to mobile (sm / md / lg / xl Tailwind breakpoints) for on-call investigations from a phone.

Key Capabilities

• Two complementary views: BGP Sankey (control plane — AS adjacencies + prefix counts) and Traffic Sankey (data plane — live byte flows)
• Animated AS-path particle engine via d3-force; 60fps with up to 3,000 active particles per scene
• Particle spawn rate proportional to live bytes/sec per link — volume becomes visual signal, not a label
• Role-coloured nodes via the v4.28+ Role Catalog: firewalls / web / mail / database / monitoring / DNS-NTP / IXP / transit / VPN / etc.
• Initial render <500ms; layout recompute <50ms; sub-second ClickHouse API responses; bundle <40KB gzipped
• Control bar: time period (1h / 6h / 24h / 7d), direction toggle (inbound/outbound/both), depth slider (1–10)
• Hover effects: selected path at 0.7 opacity, others dimmed, 2× particle-speed boost for 300ms
• Click any node or link to open detail side-panel with traffic stats, protocol breakdown, top apps, destination ports
• Low-traffic paths <0.5% auto-collapsed into “Other” node for clean visualisation at all depth levels
• Native dark theme with SVG glow filters + gradient links; full responsive layout (xl / lg / md / sm breakpoints)
• Gradient colour interpolation from source-node hue to destination-node hue across each particle’s lifetime
• Built with d3-sankey layout + React SVG + HTML5 Canvas overlay for optimal rendering performance

Engineered and operated by the GOLINE SOC & Network Engineering team.

Explore all RoutePulse features →