@cosmograph/cosmos
v2.0.0-beta.20
Published
GPU-based force graph layout and rendering
Downloads
3,454
Readme
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
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
andsetLinks
replacesetData
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
andsetPointClusterStrength
). - Ability to drag points.
Check the Migration Guide for details.
Examples
Showcase (via cosmograph.app)
- Silk Road Case: Bitcoin Transactions (📄 Read more)
- ABACUS Shell (source)
- The MathWorks, Inc: symmetric positive definite matrix (source)
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