Telecom

Telecom Network Topology

A comprehensive visualization of telecom network infrastructure, designed for network operations centers (NOC) and field engineering teams. This showcase demonstrates how TopoKit handles complex, real-world network topology data with thousands of interconnected nodes.

Features Used

Edge Bundling Node Clustering Filtering Legend Badges Web Worker Layout Custom Node Shapes Zoom & Pan

Open Full Screen

Live 500+ nodes 800+ edges

About This Showcase

Telecom operators manage vast networks of interconnected equipment spanning radio access networks (RAN), transport networks, and core infrastructure. Understanding the topology and health of these networks is critical for maintaining service quality and minimizing downtime. This showcase demonstrates how TopoKit can visualize an entire telecom network at multiple levels of detail.

The visualization maps real equipment types including RTN (Radio Transmission Network) microwave links, PTN (Packet Transport Network) switches, eNodeB base stations, core routers, and aggregation switches. Each node type is rendered with a distinct shape and color, making it easy to identify equipment at a glance. Alarm states are represented through color-coded badges -- red for critical, orange for major, yellow for minor -- following standard ITU-T alarm severity levels.

Edge bundling reduces visual clutter in dense areas where many transport links converge. The force-directed layout with clustering constraints groups equipment by site and region, while still revealing the physical connectivity patterns. Users can filter by equipment type, alarm state, or region, and drill down into any node to view detailed configuration and alarm history.

Technical Details

Layout Algorithm Force-directed with clustering constraints

Node Count 500+ nodes (scalable to 10,000+)

Edge Count 800+ connections with edge bundling

Data Source Real-time network management system (NMS) feed

Rendering Canvas 2D with level-of-detail rendering

Update Frequency Live polling every 5 seconds

Configuration Example

Here is how this telecom topology demo is configured using the TopoKit SDK. The configuration defines node types, edge bundling, clustering, and real-time data integration.

telecom-topology.ts

import {'{'} create {'}'} from '@topokit/renderer-canvas';

const graph = create(document.getElementById('container'), {'{'}
  nodes: networkData.equipment,
  edges: networkData.connections,

  // Force layout with clustering by site
  layout: {'{'}
    type: 'force',
    clustering: {'{'} field: 'site', strength: 0.8 {'}'},
    worker: true,
  {'}'},

  // Edge bundling to reduce clutter
  edgeBundling: {'{'}
    enabled: true,
    strength: 0.85,
    iterations: 6,
  {'}'},

  // Node type styling
  nodeStyle: (node) => ({'{'}
    shape: node.data.type === 'eNodeB' ? 'triangle' : 'circle',
    fill: colorByType[node.data.type],
    badge: node.data.alarmSeverity ? {'{'}
      color: alarmColors[node.data.alarmSeverity],
      text: node.data.alarmCount,
    {'}'} : null,
  {'}'}),

  theme: 'dark',
  minimap: true,
  legend: true,
{'}'});

// Live alarm updates
alarmSocket.on('update', (alarm) => {'{'}
  graph.updateNode(alarm.nodeId, {'{'}
    data: {'{'} alarmSeverity: alarm.severity {'}'},
  {'}'});
{'}'});

Building a network topology product?

Read the full network topology use case for the technical and commercial context, or jump to talk to sales.

Network Topology use case Edge Bundling LOD culling Web Worker example

Back to Showcases Next: Social Network Analysis