@cosmograph/cosmos

🌌 Cosmos

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 points and links on modern hardware.

📺 Comparison with other libraries

🎮 Try Cosmos on StackBlitz

---

Quick Start

Install the package:

npm install @cosmograph/cosmos

Configure the graph, set data, and run the simulation:

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

const div = document.querySelector('div');
const config = {
  simulationRepulsion: 0.5,
  renderLinks: true,
  onClick: (pointIndex) => {
    console.log('Clicked point index: ', pointIndex);
  },
};

const graph = new Graph(div, config);

graph.setPointPositions(pointPositions);
graph.setLinks(links);
graph.render();

• pointPositions: A Float32Array of [x1, y1, x2, y2, ..., xN, yN].
• links: A Float32Array of [sourceIndex1, targetIndex1, ..., sourceIndexN, targetIndexN].

---

What's New in v2.0?

Cosmos 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 Clustering Feature (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.

---

Documentation

• 🛠 Configuration
• ⚙️ API Reference
• 🚀 Migration Guide

---

License

CC-BY-NC-4.0

Cosmos is free for non-commercial usage. If you're a scientist, artist, educator, journalist, or student, we'd love to hear how you're using Cosmos! For commercial projects, please reach out.

---

Contact

📩 [e-mail]