GPU-based force graph layout and rendering


Keywords
graph, webgl, force, simulation, visualization, network
License
CC-BY-NC-4.0
Install
npm install @cosmograph/cosmos@2.0.0-beta.1

Documentation

๐ŸŒŒ 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 nodes and edges on modern hardware.

๐Ÿ“บ Comparison with other libraries

๐ŸŽฎ Try Cosmos on CodeSandbox

Quick Start

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.

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 trying to figure out why that happened and hope to find a way to solve the problem in the future.

License

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.

Contact

๐Ÿ“ฉ hi@cosmograph.app