Network Topology Layout Switching

Functional Overview

This example demonstrates layout switching specifically designed for network topology visualizations. It includes specialized layouts for different network views: physical layout (geographic), logical layout (hierarchical), and ring topology. Each layout emphasizes different aspects of network structure for various analysis tasks.

Implementation of Key Features

Physical Layout (Geographic)

const physicalLayout = {
    layoutName: 'fixed',
    // Nodes positioned by real-world coordinates
    nodes: networkNodes.map(n => ({
        ...n,
        x: n.longitude * scale,
        y: n.latitude * scale
    }))
};

Logical Layout (Hierarchical)

const logicalLayout = {
    layoutName: 'tree',
    from: 'top',
    // Shows network layers: core, distribution, access
    layers: ['core', 'distribution', 'access']
};

Ring Topology Layout

const ringLayout = {
    layoutName: 'circle',
    // Nodes arranged in ring for redundancy visualization
    centerX: canvasWidth / 2,
    centerY: canvasHeight / 2
};

Creative Use Cases

Network Management Consoles: Switch between physical and logical views during troubleshooting.

Data Center Design: Visualize rack layout vs. network topology.

Telecome Networks: Show geographic distribution vs. logical hierarchy.

Documentation: Generate different diagram types from same data.

Capacity Planning: Analyze network from different structural perspectives.

Edit layout of children network