Aaron King

Posted on Jan 19

Building Interactive Graph Visualizations with React Sigma.js

#react #webdev #tutorial #beginners

React Sigma.js is a React wrapper for Sigma.js, a JavaScript library for graph visualization. It provides a React-friendly API for creating interactive network graphs, node-link diagrams, and complex graph visualizations. This guide walks through setting up and creating graph visualizations using React Sigma.js with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect, useRef)
Familiarity with JavaScript/TypeScript
Understanding of graph data structures

Installation

Install React Sigma.js and Sigma.js:

npm install react-sigma sigma

Or with yarn:

yarn add react-sigma sigma

Or with pnpm:

pnpm add react-sigma sigma

After installation, your package.json should include:

{
  "dependencies": {
    "react-sigma": "^2.0.0",
    "sigma": "^2.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Sigma.js requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple graph. Create a new file src/GraphExample.jsx:

// src/GraphExample.jsx
import React from 'react';
import { Sigma, RandomizeNodePositions, RelativeSize } from 'react-sigma';

function GraphExample() {
  const graph = {
    nodes: [
      { id: '1', label: 'Node 1' },
      { id: '2', label: 'Node 2' },
      { id: '3', label: 'Node 3' },
      { id: '4', label: 'Node 4' }
    ],
    edges: [
      { id: 'e1', source: '1', target: '2' },
      { id: 'e2', source: '2', target: '3' },
      { id: 'e3', source: '3', target: '4' },
      { id: 'e4', source: '4', target: '1' }
    ]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Graph Example</h2>
      <div style={{ height: '500px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <Sigma graph={graph} settings={{ drawEdges: true, drawNodes: true }}>
          <RandomizeNodePositions />
          <RelativeSize initialSize={15} />
        </Sigma>
      </div>
    </div>
  );
}

export default GraphExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import GraphExample from './GraphExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <GraphExample />
    </div>
  );
}

export default App;

This creates a basic graph with nodes and edges.

Understanding the Basics

React Sigma.js provides graph visualization components:

Sigma component: Main graph container
Graph data: Object with nodes and edges arrays
Nodes: Graph nodes with id and label
Edges: Graph edges connecting nodes
Plugins: Additional features (RandomizeNodePositions, RelativeSize, etc.)

Key concepts:

Graph structure: Object with nodes and edges arrays
Node properties: id, label, x, y, size, color, etc.
Edge properties: id, source, target, size, color, etc.
Settings: Configure graph appearance and behavior
Plugins: Extend functionality with plugins

Here's an example with custom styling:

// src/AdvancedGraphExample.jsx
import React from 'react';
import { Sigma, RandomizeNodePositions, RelativeSize } from 'react-sigma';

function AdvancedGraphExample() {
  const graph = {
    nodes: [
      { id: '1', label: 'Node 1', color: '#ff6b6b', size: 20 },
      { id: '2', label: 'Node 2', color: '#4ecdc4', size: 15 },
      { id: '3', label: 'Node 3', color: '#45b7d1', size: 25 },
      { id: '4', label: 'Node 4', color: '#f9ca24', size: 18 },
      { id: '5', label: 'Node 5', color: '#6c5ce7', size: 22 }
    ],
    edges: [
      { id: 'e1', source: '1', target: '2', color: '#95a5a6' },
      { id: 'e2', source: '2', target: '3', color: '#95a5a6' },
      { id: 'e3', source: '3', target: '4', color: '#95a5a6' },
      { id: 'e4', source: '4', target: '5', color: '#95a5a6' },
      { id: 'e5', source: '5', target: '1', color: '#95a5a6' }
    ]
  };

  const settings = {
    drawEdges: true,
    drawNodes: true,
    defaultNodeColor: '#ec5148',
    defaultEdgeColor: '#ccc'
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Advanced Graph Example</h2>
      <div style={{ height: '600px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <Sigma graph={graph} settings={settings}>
          <RandomizeNodePositions />
          <RelativeSize initialSize={15} />
        </Sigma>
      </div>
    </div>
  );
}

export default AdvancedGraphExample;

Practical Example / Building Something Real

Let's build a network visualization:

// src/NetworkGraph.jsx
import React, { useState } from 'react';
import { Sigma, RandomizeNodePositions, RelativeSize } from 'react-sigma';

function NetworkGraph() {
  const [selectedNode, setSelectedNode] = useState(null);

  const graph = {
    nodes: [
      { id: '1', label: 'Server 1', color: '#e74c3c', size: 30 },
      { id: '2', label: 'Server 2', color: '#3498db', size: 25 },
      { id: '3', label: 'Server 3', color: '#2ecc71', size: 28 },
      { id: '4', label: 'Database', color: '#f39c12', size: 35 },
      { id: '5', label: 'Cache', color: '#9b59b6', size: 20 },
      { id: '6', label: 'Load Balancer', color: '#1abc9c', size: 32 }
    ],
    edges: [
      { id: 'e1', source: '6', target: '1', color: '#34495e' },
      { id: 'e2', source: '6', target: '2', color: '#34495e' },
      { id: 'e3', source: '6', target: '3', color: '#34495e' },
      { id: 'e4', source: '1', target: '4', color: '#34495e' },
      { id: 'e5', source: '2', target: '4', color: '#34495e' },
      { id: 'e6', source: '3', target: '4', color: '#34495e' },
      { id: 'e7', source: '1', target: '5', color: '#34495e' },
      { id: 'e8', source: '2', target: '5', color: '#34495e' },
      { id: 'e9', source: '3', target: '5', color: '#34495e' }
    ]
  };

  const settings = {
    drawEdges: true,
    drawNodes: true,
    defaultNodeColor: '#ec5148',
    defaultEdgeColor: '#ccc',
    minNodeSize: 10,
    maxNodeSize: 40
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Network Infrastructure Graph</h1>
      {selectedNode && (
        <div style={{
          padding: '10px',
          backgroundColor: '#f8f9fa',
          borderRadius: '4px',
          marginBottom: '20px'
        }}>
          Selected: {selectedNode.label}
        </div>
      )}
      <div style={{ height: '700px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <Sigma
          graph={graph}
          settings={settings}
          onOverNode={(e) => setSelectedNode(e.data.node)}
        >
          <RandomizeNodePositions />
          <RelativeSize initialSize={15} />
        </Sigma>
      </div>
    </div>
  );
}

export default NetworkGraph;

Now create a social network graph:

// src/SocialNetworkGraph.jsx
import React from 'react';
import { Sigma, RandomizeNodePositions, RelativeSize } from 'react-sigma';

function SocialNetworkGraph() {
  const graph = {
    nodes: [
      { id: '1', label: 'Alice', color: '#e74c3c', size: 25 },
      { id: '2', label: 'Bob', color: '#3498db', size: 22 },
      { id: '3', label: 'Charlie', color: '#2ecc71', size: 20 },
      { id: '4', label: 'Diana', color: '#f39c12', size: 24 },
      { id: '5', label: 'Eve', color: '#9b59b6', size: 23 },
      { id: '6', label: 'Frank', color: '#1abc9c', size: 21 }
    ],
    edges: [
      { id: 'e1', source: '1', target: '2', color: '#34495e' },
      { id: 'e2', source: '1', target: '3', color: '#34495e' },
      { id: 'e3', source: '2', target: '4', color: '#34495e' },
      { id: 'e4', source: '3', target: '5', color: '#34495e' },
      { id: 'e5', source: '4', target: '6', color: '#34495e' },
      { id: 'e6', source: '5', target: '6', color: '#34495e' },
      { id: 'e7', source: '1', target: '4', color: '#34495e' }
    ]
  };

  const settings = {
    drawEdges: true,
    drawNodes: true,
    defaultNodeColor: '#ec5148',
    defaultEdgeColor: '#ccc'
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1000px', margin: '0 auto' }}>
      <h2>Social Network Graph</h2>
      <div style={{ height: '600px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <Sigma graph={graph} settings={settings}>
          <RandomizeNodePositions />
          <RelativeSize initialSize={15} />
        </Sigma>
      </div>
    </div>
  );
}

export default SocialNetworkGraph;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import NetworkGraph from './NetworkGraph';
import SocialNetworkGraph from './SocialNetworkGraph';
import './App.css';

function App() {
  return (
    <div className="App">
      <NetworkGraph />
      <SocialNetworkGraph />
    </div>
  );
}

export default App;

This example demonstrates:

Network visualization
Social network graphs
Custom node styling
Interactive features
Event handling
Custom colors and sizes

Common Issues / Troubleshooting

Graph not displaying: Make sure you've installed both react-sigma and sigma. The graph requires Sigma.js core library.
Nodes not showing: Check that the graph data structure is correct with nodes and edges arrays. Each node needs an id property.
Edges not connecting: Ensure edge source and target properties match node id values. Check for typos in node IDs.
Styling issues: Customize node and edge colors through the graph data or settings. Use color property for nodes and edges.
Layout issues: Use RandomizeNodePositions plugin to randomize node positions. For custom layouts, set node x and y properties.
Performance: For large graphs, consider using graph layout algorithms or data sampling. Sigma.js handles large graphs well, but optimization may be needed for very large datasets.

Next Steps

Now that you have an understanding of React Sigma.js:

Explore all available plugins
Learn about advanced graph layouts
Implement custom node renderers
Add animations and transitions
Create interactive graph editors
Learn about other graph libraries
Check the official repository: https://github.com/dunnock/react-sigma

Summary

You've successfully set up React Sigma.js in your React application and created network graphs, social network visualizations, and interactive graph displays. React Sigma.js provides a powerful solution for creating graph visualizations with extensive customization options.

SEO Keywords

react-sigmajs
React Sigma.js
react-sigmajs tutorial
React graph visualization
react-sigmajs installation
React network graph
react-sigmajs example
React graph library
react-sigmajs setup
React node-link diagram
react-sigmajs customization
React graph component
react-sigmajs plugins
React graph visualization
react-sigmajs getting started

DEV Community