Force-Directed Graph - Grouped Nodes

Nodes can be colored by group to show clusters or categories. This example shows a software dependency network.

View Source

type: force
engine: d3
width: 900
height: 700
title: "Module Dependencies"
nodeRadius: 10
linkDistance: 100
chargeStrength: -200
collisionRadius: 15

data:
  source:
    nodes:
      - { id: "App", group: "core" }
      - { id: "Router", group: "core" }
      - { id: "Store", group: "state" }
      - { id: "Actions", group: "state" }
      - { id: "Reducers", group: "state" }
      - { id: "API", group: "services" }
      - { id: "Auth", group: "services" }
      - { id: "Logger", group: "utils" }
      - { id: "Cache", group: "utils" }
      - { id: "Header", group: "ui" }
      - { id: "Footer", group: "ui" }
      - { id: "Button", group: "ui" }
    links:
      - { source: "App", target: "Router", value: 3 }
      - { source: "App", target: "Store", value: 4 }
      - { source: "App", target: "Header", value: 2 }
      - { source: "App", target: "Footer", value: 2 }
      - { source: "Router", target: "Auth", value: 3 }
      - { source: "Store", target: "Actions", value: 4 }
      - { source: "Store", target: "Reducers", value: 4 }
      - { source: "Actions", target: "API", value: 3 }
      - { source: "API", target: "Auth", value: 2 }
      - { source: "API", target: "Cache", value: 2 }
      - { source: "Auth", target: "Logger", value: 1 }
      - { source: "Header", target: "Button", value: 2 }
      - { source: "Footer", target: "Button", value: 2 }
      - { source: "Logger", target: "Cache", value: 1 }

colorScheme: tableau10

Using Node Groups

When your data includes a group property on nodes, the color scale is applied to the group value rather than the node ID. This creates natural color clusters.

Data Format Options

Edge list (flat array):

data:
  source: |
    [{"source": "A", "target": "B", "value": 1}]

Explicit nodes and links (more control):

data:
  source:
    nodes:
      - { id: "A", group: "category1" }
    links:
      - { source: "A", target: "B", value: 1 }