GPU-accelerated Force Graph

Cosmos is a WebGL Force Graph layout algorithm and rendering engine. All the computations and drawing are happening on the GPU in fragment and vertex shaders avoiding expensive memory operations.

It enables real-time simulation of network graphs consisting of hundreds of thousands of nodes and edges on modern hardware.

📺 Comparison with other libraries

🎮 Try Cosmos on CodeSandbox

Install the package:

npm install @cosmograph/cosmos

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

import { Graph } from '@cosmograph/cosmos'
import { nodes, links } from './data'

const canvas = document.querySelector('canvas')
const config = {
  simulation: {
    repulsion: 0.5,
  },
  renderLinks: true,
  linkColor: link => link.color,
  nodeColor: node => node.color,
  events: {
    onClick: node => { console.log('Clicked node: ', node) },
  },
  /* ... */
}

const graph = new Graph(canvas, config)

graph.setData(nodes, links)

Note If your canvas element has no width and height styles (either CSS or inline) Cosmos will automatically set them to 100%.

Warning If you're going to create a new graph within the same HTML canvas element that already has a graph, destroy the previous graph using graph.destroy() to prevent unexpected glitches.

Check out the Wiki for more information on 🛠 Configuration and ⚙️ API Reference.

• Basic Set-Up
• Adding Node Labels (via @interacta/css-labels)

• Silk Road Case: Bitcoin Transactions (📄 Read about the case)
• ABACUS Shell (source)
• The MathWorks, Inc: symmetric positive definite matrix (source)
• 4 Tower Silo (source)
• Jacobian from Bank of Canada ‘jan99’ model (source)

Starting from version 15.4, iOS has stopped supporting the key WebGL extension powering our Many-Body force implementation (EXT_float_blend). We're trying to figure out why that happened and hope to find a way to solve the problem in the future.

CC-BY-NC-4.0

Cosmos is free non-commercial usage. If you're a scientist, artist, educator, journalist, student, ..., we would love to hear about your project and how you use Cosmos! If you want to use it in a commercial project, please reach out to us.

📩 hi@cosmograph.app