https://github.com/cosmograph-org/cosmos
GPU-accelerated force graph layout and rendering
https://github.com/cosmograph-org/cosmos
force graph network simulation visualization webgl
Last synced: about 1 year ago
JSON representation
GPU-accelerated force graph layout and rendering
- Host: GitHub
- URL: https://github.com/cosmograph-org/cosmos
- Owner: cosmograph-org
- License: other
- Created: 2022-04-14T01:30:14.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-09T09:49:54.000Z (almost 2 years ago)
- Last Synced: 2024-09-09T11:42:53.712Z (almost 2 years ago)
- Topics: force, graph, network, simulation, visualization, webgl
- Language: TypeScript
- Homepage:
- Size: 680 KB
- Stars: 812
- Watchers: 9
- Forks: 53
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Citation: CITATION.cff
Awesome Lists containing this project
README
🌌 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 points and links on modern hardware.
[📺 Comparison with other libraries](https://www.youtube.com/watch?v=HWk78hP8aEE)
[🎮 Try Cosmos on StackBlitz](https://stackblitz.com/edit/how-to-use-cosmos?file=src%2Fmain.ts)
---
### Quick Start
Install the package:
```bash
npm install @cosmograph/cosmos
```
Get the data, [configure](../?path=/docs/configuration--docs) the graph and run the simulation:
```javascript
import { Graph } from '@cosmograph/cosmos'
const div = document.querySelector('div')
const config = {
spaceSize: 4096,
simulationFriction: 0.1, // keeps the graph inert
simulationGravity: 0, // disables gravity
simulationRepulsion: 0.5, // increases repulsion between points
curvedLinks: true, // curved links
fitViewDelay: 1000, // wait 1 second before fitting the view
fitViewPadding: 0.3, // centers the graph width padding of ~30% of screen
disableRescalePositions: false, // rescale positions
enableDrag: true, // enable dragging points
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()
```
---
### 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` and `setLinks` replace `setData` 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` and `setPointClusterStrength`).
- Ability to drag points.
Check the [Migration Guide](./cosmos-2-0-migration-notes.md) for details.
---
### Examples
- [Basic Set-Up](https://cosmograph-org.github.io/cosmos/?path=/story/examples-beginners--basic-set-up)
---
### Showcase (via [cosmograph.app](https://cosmograph.app))
- [Silk Road Case: Bitcoin Transactions](https://cosmograph.app/run/?data=https://cosmograph.app/data/184R7cFG-4lv.csv) ([📄 Read more](https://medium.com/@cosmograph.app/visualizing-darknet-6846dec7f1d7))
- [ABACUS Shell](https://cosmograph.app/run/?data=https://cosmograph.app/data/ABACUS_shell_hd.csv) ([source](http://sparse.tamu.edu/Puri/ABACUS_shell_hd))
- [The MathWorks, Inc: symmetric positive definite matrix](https://cosmograph.app/run/?data=https://cosmograph.app/data/Kuu.csv) ([source](https://sparse.tamu.edu/MathWorks/Kuu))
---
### 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
- 🧑💻 [Quick Start](https://cosmograph-org.github.io/cosmos/?path=/docs/welcome-to-cosmos--docs)
- 🛠 [Configuration](https://cosmograph-org.github.io/cosmos/?path=/docs/configuration--docs)
- ⚙️ [API Reference](https://cosmograph-org.github.io/cosmos/?path=/docs/api-reference--docs)
- 🚀 [Migration Guide](./cosmos-2-0-migration-notes.md)
---
### License
**MIT**
---
### Contact
[📩 hi@cosmograph.app](mailto:hi@cosmograph.app)