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.
cosmos-reel-720p.mp4
📺 Comparison with other libraries
Install the package:
npm install @cosmograph/cosmosConfigure the graph, set data, 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();pointPositions: An array of[x1, y1, x2, y2, ..., xN, yN].links: An array of[sourceIndex1, targetIndex1, ..., sourceIndexN, targetIndexN].
Note If your canvas element has no width and height styles (either CSS or inline), Cosmos will automatically set them to 100%.
Cosmos v2.0 introduces significant improvements in performance and data handling:
- Enhanced data structures with WebGL-compatible formats.
- Methods like
setPointPositionsandsetLinksreplacesetDatafor improved efficiency. - Direct control over point and link attributes via arrays (e.g., colors, sizes, widths).
- Updated event handling based on indices instead of objects.
Check the Migration Guide for details.
Showcase (via cosmograph.app)
- Silk Road Case: Bitcoin Transactions (📄 Read more)
- ABACUS Shell (source)
- The MathWorks, Inc: symmetric positive definite matrix (source)
- 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.
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.
