Home
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.
Install the package:
npm install @cosmograph/cosmosGet 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%.