Graph.gl

WebGL2-Powered Visualization Components for Graph Visualization - Modernized for 2025

A React component library for visualizing large graphs with customizable layouts and rendering. Originally created by Uber, now modernized and maintained for phylogenetic tree visualization and other graph-based applications.

✨ Features

🚀 High Performance: WebGL-powered rendering via deck.gl 9
⚛️ Modern React: Built for React 18 with hooks support
🎨 Highly Customizable: Composable API for nodes, edges, and layouts
📊 Multiple Layouts: D3 force-directed, simple, and custom layouts
🌳 Phylogenetic Trees: Perfect for tree visualization use cases
🎯 Interactive: Built-in support for dragging, clicking, and viewport manipulation
📦 TypeScript Ready: Full type definitions included (coming soon)
🧪 Well Tested: Comprehensive test suite with Jest

🚀 Installation

npm install @frutuoso/graph.gl

Peer Dependencies

This library requires React 18+ and additional deck.gl dependencies:

npm install react@^18.0.0 react-dom@^18.0.0
npm install @deck.gl/core@^9.0.0 @deck.gl/layers@^9.0.0 @deck.gl/react@^9.0.0
npm install @luma.gl/core@^9.0.0 @luma.gl/engine@^9.0.0 @loaders.gl/core@^4.0.0

Or with yarn:

yarn add @frutuoso/graph.gl
yarn add react@^18.0.0 react-dom@^18.0.0
yarn add @deck.gl/core@^9.0.0 @deck.gl/layers@^9.0.0 @deck.gl/react@^9.0.0
yarn add @luma.gl/core@^9.0.0 @luma.gl/engine@^9.0.0 @loaders.gl/core@^4.0.0

📖 Quick Start

import React from 'react';
import GraphGL, {
  JSONLoader,
  NODE_TYPE,
  D3ForceLayout
} from '@frutuoso/graph.gl';

const MyGraph = ({data}) => {
  const graph = JSONLoader({
    json: data,
    nodeParser: node => ({id: node.id}),
    edgeParser: edge => ({
      id: edge.id,
      sourceId: edge.sourceId,
      targetId: edge.targetId,
      directed: true,
    }),
  });

  return (
    <GraphGL
      graph={graph}
      layout={new D3ForceLayout()}
      nodeStyle={[
        {
          type: NODE_TYPE.CIRCLE,
          radius: 10,
          fill: 'blue',
          opacity: 1,
        },
      ]}
      edgeStyle={{
        stroke: 'black',
        strokeWidth: 2,
      }}
      enableDragging
    />
  );
};

export default MyGraph;

🎯 Use Cases

Phylogenetic Tree Visualization: Display evolutionary relationships
Knowledge Graphs: Explore interconnected data
Network Diagrams: Visualize complex systems
Social Networks: Map relationships and connections
Dependency Graphs: Understand project dependencies

📚 Documentation

🔧 Development

Setup

# Clone the repository
git clone https://github.com/Gongamax/graph.gl.git
cd graph.gl

# Install dependencies
yarn install

# Run tests
yarn test

# Run linter
yarn lint

# Build the library
yarn build

Testing

# Run all tests
yarn test

# Run tests with coverage
yarn cover

# Run linter
yarn lint

🆕 What's New in 2.0

This is a major modernization release bringing graph.gl from 2019 to 2025 standards:

Updated Dependencies

⚛️ React 16 → 18
📊 D3 v5 → v7
🎮 deck.gl 7 → 9
🧪 Jest 23 → 29
💅 styled-components 4 → 6

Improvements

✅ Modern build tooling (Babel 7.24, ESLint 8)
✅ All tests passing (30 tests, 12 suites)
✅ Production build verified
✅ ES modules support
✅ Automatic JSX runtime

See CHANGELOG.md for detailed migration guide.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

Originally created by Uber Technologies, Inc.

🙏 Credits

Original library by Uber Technologies
Modernized and maintained by Gonçalo Frutuoso
Built with deck.gl and React
Layout algorithms powered by D3

📬 Contact

Gonçalo Frutuoso - goncalofrutuoso@gmail.com

Project Link: https://github.com/Gongamax/graph.gl

Made with ❤️ for the graph visualization community