2

Network Graph

PreviousNext

Force-directed graph for visualizing relationships between entities.

Team A
Team B
Team C
"use client"

import { NetworkGraph } from "@/components/ui/charts/specialized/network-graph"

const nodes = [
  { id: "Alice", group: "Team A" },
  { id: "Bob", group: "Team A" },
  { id: "Carol", group: "Team B" },
  { id: "Dave", group: "Team B" },
  { id: "Eve", group: "Team C" },
  { id: "Frank", group: "Team C" },
  { id: "Grace", group: "Team A" },
  { id: "Henry", group: "Team B" },
]

const links = [
  { source: "Alice", target: "Bob", value: 2 },
  { source: "Alice", target: "Carol", value: 1 },
  { source: "Bob", target: "Dave", value: 1 },
  { source: "Carol", target: "Dave", value: 2 },
  { source: "Eve", target: "Frank", value: 2 },
  { source: "Eve", target: "Alice", value: 1 },
  { source: "Frank", target: "Grace", value: 1 },
  { source: "Grace", target: "Henry", value: 1 },
  { source: "Henry", target: "Carol", value: 1 },
  { source: "Dave", target: "Eve", value: 1 },
]

export function NetworkGraphDemo() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <NetworkGraph
        nodes={nodes}
        links={links}
        showLabels
        charge={-200}
        linkDistance={80}
      />
    </div>
  )
}

About

The Network Graph is a force-directed visualization that shows relationships between nodes. It uses D3's force simulation to position nodes and highlight connections. Ideal for social networks, system architectures, and dependency relationships.

Installation

pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/network-graph.json

Usage

import { NetworkGraph } from "@/components/ui/charts"
 
const nodes = [
  { id: "Alice", group: "Team A" },
  { id: "Bob", group: "Team A" },
  { id: "Carol", group: "Team B" },
]
 
const links = [
  { source: "Alice", target: "Bob" },
  { source: "Bob", target: "Carol" },
]
 
export function Example() {
  return <NetworkGraph nodes={nodes} links={links} />
}

Variants

Directed Graph with Arrows

Show directional relationships with arrows.

Frontend
Services
Database
Queue
"use client"

import { NetworkGraph } from "@/components/ui/charts/specialized/network-graph"

const nodes = [
  { id: "API Gateway", group: "Frontend", size: 12 },
  { id: "Auth Service", group: "Services", size: 10 },
  { id: "User Service", group: "Services", size: 10 },
  { id: "Order Service", group: "Services", size: 10 },
  { id: "Payment Service", group: "Services", size: 10 },
  { id: "PostgreSQL", group: "Database", size: 8 },
  { id: "Redis", group: "Database", size: 8 },
  { id: "RabbitMQ", group: "Queue", size: 8 },
]

const links = [
  { source: "API Gateway", target: "Auth Service" },
  { source: "API Gateway", target: "User Service" },
  { source: "API Gateway", target: "Order Service" },
  { source: "Auth Service", target: "PostgreSQL" },
  { source: "Auth Service", target: "Redis" },
  { source: "User Service", target: "PostgreSQL" },
  { source: "Order Service", target: "PostgreSQL" },
  { source: "Order Service", target: "Payment Service" },
  { source: "Order Service", target: "RabbitMQ" },
  { source: "Payment Service", target: "RabbitMQ" },
]

export function NetworkGraphDirected() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <NetworkGraph
        nodes={nodes}
        links={links}
        showLabels
        showArrows
        charge={-350}
        linkDistance={100}
        colorScheme={["#dc2626", "#2563eb", "#059669", "#d97706"]}
      />
    </div>
  )
}

API Reference

PropTypeDefaultDescription
nodesNetworkNode[]requiredArray of nodes
linksNetworkLink[]requiredArray of links
nodeRadiusnumber8Default node radius
linkWidthnumber1.5Default link width
showLabelsbooleantrueShow node labels
showArrowsbooleanfalseShow direction arrows
chargenumber-300Force simulation charge
linkDistancenumber100Target link distance
colorSchemestring[]blue paletteColors for groups

Notes

  • The force simulation automatically positions nodes based on their relationships
  • Node groups are used for color coding; nodes without a group will use the default color
  • The charge prop controls how strongly nodes repel each other (negative values create repulsion)
  • Link distance is a target value; the simulation will attempt to maintain this distance between connected nodes
  • Use showArrows for directed graphs to indicate the direction of relationships
  • The simulation continues running until equilibrium is reached; you can interact with nodes by dragging them