devsoc.co.za network graph

An interactive visualization showing a force-directed network graph of domains loaded from network.json. Features include dark mode, search, filtering, graph export, and many advanced visualization controls.

Features

• Interactive Force-Directed Graph: Drag, zoom, and explore the network visually
• Minimap Navigation: Overview map for easy navigation in complex networks
• Node Details Panel: Expandable sections with comprehensive information
• Dark/Light Mode: Toggle between color schemes for different viewing conditions
• Search & Filtering: Find specific nodes or filter by node types
• Context Menu: Right-click nodes for additional options
• Tooltips: Hover over nodes to see quick information
• Export to PNG: Save high-resolution images of the current graph view
• Network Statistics: View counts of nodes and connections by type
• Zoom Controls: Easily zoom in/out and reset the view
• Node Grouping: Group nodes by type, provider, or status
• Responsive Design: Works on desktop and mobile devices
• Simulation Controls: Pause/play the force simulation
• History Tracking: See recently viewed nodes
• Performance Mode: Optimize for large graphs
• Keyboard Shortcuts: Power-user controls for common actions

Run locally

You can open index.html directly in your browser. For best results (and to avoid any cross-origin issues when you expand later), serve it with a local static server:

python3 -m http.server 8080

Then open http://localhost:8080 in your browser and navigate to this folder.

Keyboard Shortcuts

• F: Toggle fullscreen mode
• C: Center on selected node
• Space: Pause/play simulation
• +/=: Zoom in
• -/_: Zoom out
• 0: Reset zoom
• Esc: Close context menu

Customize

• Edit network.json to add or remove nodes/links. Example:

{
  "nodes": [
    { "id": "devsoc.co.za", "name": "devsoc.co.za", "type": "root", "ip": "1.1.1.1" },
    { "id": "network.devsoc.co.za", "name": "network.devsoc.co.za", "type": "subdomain" }
  ],
  "links": [
    { "source": "devsoc.co.za", "target": "network.devsoc.co.za" }
  ]
}

• Node properties will appear in the details panel when clicked
• The "type" field determines node styling (default types: "root", "subdomain")
• Add custom node properties like ip, asn, provider, status to enhance the visualization
• Status values "Active", "Warning", and "Error" get special styling
• Customize styling in styles.css

Advanced Usage

• Pinning Nodes: Shift+click and drag a node to pin it at a specific position
• Node Grouping: Use the grouping button to organize nodes by type
• Tab Panels: Switch between details, groups, history, and settings views
• Context Menu: Right-click on nodes for additional options
• Highlighting: Mark important nodes with permanent highlights
• Related Nodes: Quickly see nodes connected to the selected one
• Minimap: Click anywhere in the minimap to navigate to that area

Dependencies

• D3.js for visualization (loaded from CDN)
• FileSaver.js for PNG export (loaded from CDN)
• Font Awesome for icons (loaded from CDN)