Cosmos v2 (Beta version)

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.

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 { pointPositions, links } from './data'

const canvas = document.querySelector('canvas')
const config = {
  simulation: {
    repulsion: 0.5,
  },
  renderLinks: true,
  events: {
    onClick: pointIndex => { console.log('Clicked point index: ', pointIndex) },
  },
  /* ... */
}

const graph = new Graph(canvas, config)

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

Where pointPositions - an array of [x1, y1, x2, y2, x3, y3] and links an array of [sourceIndex1, targetIndex1, sourceIndex2, targetIndex2, sourceIndex3, targetIndex3].

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

Examples

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