GPU-accelerated Force Graph

cosmos.gl is a high-performance WebGL Force Graph algorithm and rendering engine. All the computations and drawing occur on the GPU in fragment and vertex shaders, avoiding expensive memory operations. It enables the real-time simulation of network graphs consisting of hundreds of thousands of points and links on modern hardware.

This engine powers 🪐 Cosmograph — a toolset for exploring complex networks and AI embeddings.

📺 Comparison with other libraries

🎮 Check out our storybook for examples

Quick Start

Install the package:

bash npm install @cosmos.gl/graph

Get the data, configure the graph and run the simulation:

```javascript import { Graph } from '@cosmos.gl/graph'

const div = document.querySelector('div') const config = { spaceSize: 4096, simulationFriction: 0.1, // keeps the graph inert simulationGravity: 0, // disables the gravity force simulationRepulsion: 0.5, // increases repulsion between points curvedLinks: true, // curved links fitViewOnInit: true, // fit the view to the graph after initialization fitViewDelay: 1000, // wait 1 second before fitting the view fitViewPadding: 0.3, // centers the graph with a padding of ~30% of screen rescalePositions: false, // rescale positions, useful when coordinates are too small enableDrag: true, // enable dragging points onClick: (pointIndex) => { console.log('Clicked point index: ', pointIndex) }, /* ... */ }

const graph = new Graph(div, config)

// Points: [x1, y1, x2, y2, x3, y3] const pointPositions = new Float32Array([ 0.0, 0.0, // Point 1 at (0,0) 1.0, 0.0, // Point 2 at (1,0) 0.5, 1.0, // Point 3 at (0.5,1) ]);

graph.setPointPositions(pointPositions)

// Links: [sourceIndex1, targetIndex1, sourceIndex2, targetIndex2] const links = new Float32Array([ 0, 1, // Link from point 0 to point 1 1, 2, // Link from point 1 to point 2 2, 0, // Link from point 2 to point 0 ]);

graph.setLinks(links)

graph.render() ```

What's New in v2.0?

cosmos.gl v2.0 introduces significant improvements in performance and data handling:

• Enhanced data structures with WebGL-compatible formats.
• Methods like setPointPositions and setLinks replace setData for improved efficiency.
• Direct control over point and link attributes via Float32Array (e.g., colors, sizes, widths).
• Updated event handling based on indices instead of objects.
• New Point Clustering force (setPointClusters, setClusterPositions and setPointClusterStrength).
• Ability to drag points.

Check the Migration Guide for details.

Examples

• Basic Set-Up

Showcase (via cosmograph.app)

• Silk Road Case: Bitcoin Transactions (📄 Read more)
• ABACUS Shell (source)
• The MathWorks, Inc: symmetric positive definite matrix (source)

Known Issues

• ~~Starting from version 15.4, iOS has stopped supporting the key WebGL extension powering our Many-Body force implementation (EXT_float_blend). We're investigating this issue and exploring solutions.~~ The latest iOS works again!
• cosmos.gl doesn't work on Android devices that don't support the OES_texture_float WebGL extension.

Documentation

• 🧑‍💻 Quick Start
• 🛠 Configuration
• ⚙️ API Reference
• 🚀 Migration Guide

License

MIT

Contact

GitHub Discussions