Force-Directed Graph - Basic Example

A force-directed layout uses physics simulation to position nodes. Hover over nodes to highlight their connections.

View Source

type: force
engine: d3
width: 800
height: 600
title: "Team Collaboration Network"
nodeRadius: 8
linkDistance: 80
chargeStrength: -150

data:
  source: |
    [
      {"source": "Alice", "target": "Bob", "value": 5},
      {"source": "Alice", "target": "Charlie", "value": 3},
      {"source": "Bob", "target": "Diana", "value": 4},
      {"source": "Charlie", "target": "Diana", "value": 2},
      {"source": "Diana", "target": "Eve", "value": 3},
      {"source": "Eve", "target": "Frank", "value": 4},
      {"source": "Frank", "target": "Alice", "value": 2},
      {"source": "Bob", "target": "Eve", "value": 1},
      {"source": "Charlie", "target": "Frank", "value": 2}
    ]

colorScheme: category10

Configuration Options

Option	Description	Default
nodeRadius	Size of node circles	5
linkDistance	Target distance between connected nodes	50
chargeStrength	Repulsion force between nodes (negative = repel)	-100
collisionRadius	Minimum distance between nodes	nodeRadius

Interactions

• Hover over a node to highlight its direct connections
• Connected nodes and edges are emphasized while others fade
• Node labels remain visible for highlighted nodes