Network Graph Visualization on Website

Building Network Graph Visualizations for Websites

Network Graph is an interactive visualization of nodes and connections: social graphs, package dependencies, microservice schemes, knowledge maps. Requires force-directed layout algorithms for organic node placement.

Libraries

• D3 Force — low-level, full control
• react-force-graph — React wrapper around D3 + WebGL (2D and 3D)
• Sigma.js — for large graphs (>1k nodes) via WebGL
• Cytoscape.js — rich functionality, biological graphs

react-force-graph — Recommended Approach

npm install react-force-graph-2d

import ForceGraph2D from 'react-force-graph-2d';
import { useCallback, useRef, useState } from 'react';

interface Node {
  id: string;
  name: string;
  type: 'service' | 'database' | 'external';
  group: number;
}

interface Link {
  source: string;
  target: string;
  label?: string;
  weight?: number;
}

function ServiceDependencyGraph({ nodes, links }) {
  const graphRef = useRef();
  const [selectedNode, setSelectedNode] = useState(null);
  const [hoveredNode, setHoveredNode] = useState(null);

  const highlightedLinks = useMemo(() => {
    if (!selectedNode) return new Set();
    return new Set(
      links.filter(l => l.source === selectedNode.id || l.target === selectedNode.id)
        .map(l => `${l.source}-${l.target}`)
    );
  }, [selectedNode, links]);

  const nodeColor = useCallback((node) => {
    const colors = { service: '#3b82f6', database: '#22c55e', external: '#f59e0b' };
    if (selectedNode && node.id !== selectedNode.id) {
      const isRelated = links.some(l =>
        (l.source === selectedNode.id && l.target === node.id) ||
        (l.target === selectedNode.id && l.source === node.id)
      );
      return isRelated ? colors[node.type] : '#d1d5db';
    }
    return colors[node.type] ?? '#6b7280';
  }, [selectedNode, links]);

  const nodeCanvasObject = useCallback((node, ctx, globalScale) => {
    const label = node.name;
    const fontSize = 12 / globalScale;
    const r = 6;

    ctx.beginPath();
    ctx.arc(node.x, node.y, r, 0, 2 * Math.PI);
    ctx.fillStyle = nodeColor(node);
    ctx.fill();

    if (selectedNode?.id === node.id) {
      ctx.strokeStyle = '#1d4ed8';
      ctx.lineWidth = 2 / globalScale;
      ctx.stroke();
    }

    ctx.font = `${fontSize}px Sans-Serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = '#374151';
    ctx.fillText(label, node.x, node.y + r + fontSize);
  }, [nodeColor, selectedNode]);

  const linkColor = useCallback((link) => {
    const key = `${link.source.id ?? link.source}-${link.target.id ?? link.target}`;
    return highlightedLinks.has(key) ? '#3b82f6' : '#e5e7eb';
  }, [highlightedLinks]);

  return (
    <div className="relative border border-gray-200 rounded-xl overflow-hidden" style={{ height: 600 }}>
      <ForceGraph2D
        ref={graphRef}
        graphData={{ nodes, links }}
        nodeId="id"
        nodeLabel="name"
        nodeCanvasObject={nodeCanvasObject}
        nodeCanvasObjectMode={() => 'replace'}
        linkColor={linkColor}
        linkWidth={link => (link.weight ?? 1) * 0.5}
        linkDirectionalArrowLength={3}
        linkDirectionalArrowRelPos={1}
        linkLabel="label"
        onNodeClick={(node) => {
          setSelectedNode(prev => prev?.id === node.id ? null : node);
        }}
        onNodeHover={setHoveredNode}
        onBackgroundClick={() => setSelectedNode(null)}
        d3AlphaDecay={0.02}
        d3VelocityDecay={0.3}
        warmupTicks={50}
        cooldownTicks={200}
      />

      {selectedNode && (
        <div className="absolute top-4 right-4 bg-white border rounded-lg shadow-lg p-4 w-64">
          <h3 className="font-semibold text-gray-800">{selectedNode.name}</h3>
          <p className="text-sm text-gray-500 capitalize">{selectedNode.type}</p>
          <div className="mt-3">
            <p className="text-xs text-gray-500">Incoming links:</p>
            <ul className="text-sm">
              {links.filter(l => (l.target.id ?? l.target) === selectedNode.id)
                .map(l => <li key={l.source.id ?? l.source}>← {l.source.name ?? l.source}</li>)}
            </ul>
          </div>
        </div>
      )}

      <div className="absolute bottom-4 left-4 bg-white/90 rounded-lg p-3 text-xs">
        <div className="flex items-center gap-2 mb-1">
          <div className="w-3 h-3 rounded-full bg-blue-500" /> Service
        </div>
        <div className="flex items-center gap-2 mb-1">
          <div className="w-3 h-3 rounded-full bg-green-500" /> Database
        </div>
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-yellow-500" /> External API
        </div>
      </div>
    </div>
  );
}

3D Graph

import ForceGraph3D from 'react-force-graph-3d';

function Graph3D({ data }) {
  return (
    <ForceGraph3D
      graphData={data}
      nodeAutoColorBy="group"
      nodeLabel="name"
      linkDirectionalParticles={2}
      linkDirectionalParticleSpeed={0.006}
      backgroundColor="#0f172a"
    />
  );
}

Large Graphs with Sigma.js

npm install sigma graphology @react-sigma/core

Sigma.js renders via WebGL — handles 50k+ nodes.

import { SigmaContainer, useLoadGraph, useRegisterEvents } from '@react-sigma/core';
import Graph from 'graphology';

function LargeGraph({ graphData }) {
  return (
    <SigmaContainer style={{ height: 600 }} settings={{ nodeProgramClasses: {} }}>
      <GraphLoader data={graphData} />
    </SigmaContainer>
  );
}

Timeline

Graph with force-directed layout, highlighting and info panel — 1.5–2 weeks. 3D graph or Sigma.js for large data — another 1 week.