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 nodes and edges on modern hardware.
📺 Comparison with other libraries
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'constcanvas=document.querySelector('canvas')constconfig={simulation: {repulsion: 0.5,},renderLinks: true,linkColor: link=>link.color,nodeColor: node=>node.color,events: {onClick: node=>{console.log('Clicked node: ',node)},},/* ... */}constgraph=newGraph(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%.
Warning If you're going to create a new graph within the same HTML canvas element that already has a graph, destroy the previous graph using
graph.destroy()to prevent unexpected glitches.
Check out the Wiki for more information on 🛠 Configuration and ⚙️ API Reference.
Showcase (via cosmograph.app)
- Silk Road Case: Bitcoin Transactions (📄 Read about the case)
- ABACUS Shell (source)
- The MathWorks, Inc: symmetric positive definite matrix (source)
- 4 Tower Silo (source)
- Jacobian from Bank of Canada ‘jan99’ model (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 trying to figure out why that happened and hope to find a way to solve the problem in the future.
CC-BY-NC-4.0
Cosmos is free non-commercial usage. If you're a scientist, artist, educator, journalist, student, ..., we would love to hear about your project and how you use Cosmos! If you want to use it in a commercial project, please reach out to us.