Visualizing Document Relationships with D3.js Force Graphs

A Graph on a Blog?

I wanted to visually show the relationships between blog posts. Using D3.js's Force-Directed Graph, I render an interactive network of connected documents.

How the Force Graph Works

graph TD
    A[포스트 데이터] --> B[노드 생성]
    A --> C[연결 관계 추출]
    B --> D[D3 Force Simulation]
    C --> D
    D --> E[물리 시뮬레이션]
    E --> F[렌더링]
    F --> G[인터랙션 처리]
    G --> D

Physics Simulation Parameters

const simulation = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links)
    .id(d => d.id)
    .distance(100))
  .force("charge", d3.forceManyBody()
    .strength(-300))
  .force("center", d3.forceCenter(width / 2, height / 2))
  .force("collision", d3.forceCollide(30));

• link: Maintains distance between connected nodes
• charge: Repulsion between nodes (prevents overlap)
• center: Force that pulls nodes toward the center
• collision: Collision-avoidance radius

Node Size and Color

Colors vary by category; sizes vary by connection count:

const nodeRadius = (node: GraphNode) => {
  const connections = links.filter(
    l => l.source === node.id || l.target === node.id
  ).length;
  return Math.max(8, Math.min(20, 5 + connections * 2));
};

const categoryColors: Record<string, string> = {
  "AI": "#4FC3F7",
  "Dev": "#81C784",
  "LLM": "#FFB74D",
  "Infra": "#E57373",
};

Interactions

• Hover: Hovering over a node shows a tooltip with the post title
• Click: Navigates to the corresponding post page
• Drag: Drag nodes to reposition them
• Zoom/Pan: Mouse wheel and drag to adjust the view

This is how the graph on this blog is being built ...