@cosmograph/cosmos
TypeScript icon, indicating that this package has built-in type declarations

2.0.0-beta.20 • Public • Published

🌌 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'

const div = document.querySelector('div')
const config = {
  simulationFriction: 0.1, // keeps the graph inert
  simulationGravity: 0, // disables gravity
  simulationRepulsion: 0.5, // increases repulsion between points
  curvedLinks: true, // curved links
  fitViewPadding: 0.3, // centers the graph width padding of ~30% of screen
  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()
  • 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


Showcase (via cosmograph.app)


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


License

MIT


Contact

📩 hi@cosmograph.app

Package Sidebar

Install

npm i @cosmograph/cosmos

Weekly Downloads

1,042

Version

2.0.0-beta.20

License

MIT

Unpacked Size

2.47 MB

Total Files

130

Last publish

Collaborators

  • kolmakova
  • rokotyan
  • stukova