Cosmograph: The fastest web-based graph visualization library
    
A powerful JavaScript graph visualization library powered by Cosmos.gl – a GPU-accelerated force layout engine. It rapidly visualizes large scale network graphs and machine learning embeddings in any modern web browser, providing interactive tools for exploring your data.
- 🧠 High-performance processing of millions of points and edges on modern hardware
- 🧩 Ready-to-use interactive components including a timeline, search, histograms, legends, and more.
- 🛠️ Flexible configuration API for full customization over graph behavior and appearance
- 🎨 Rich set of automatic data-based coloring and sizing strategies for points and links
- ✨ Real-time addition, removal, and positioning of points and links
- 📊 Support for standard data formats including .csv, .parquet, .arrow and .json
- 🔍 SQL capabilities for powerful data transformations and filtering
- 🔗 Direct connection to tables in external DuckDB instances
- ⌨️ TypeScript support featuring comprehensive types and API hints
1️⃣ Install the package:
``sh`
npm install @cosmograph/cosmograph
2️⃣ Get the data, configure the graph and render Cosmograph in the provided container:
`typescript
import { Cosmograph, prepareCosmographData } from '@cosmograph/cosmograph'
// Points and links data can be:
// - Array of objects
// - File (.csv/.tsv, .parquet/.pq, .arrow, .json)
// - URL string to a file
// - Apache Arrow Table (binary data Uint8Array/ArrayBuffer)
// - DuckDB table name if connection is passed into the Cosmograph constructor
const rawPoints = [{ id: 'a' }, { id: 'b' }, { id: 'c' }]
const rawLinks = [
{ source: 'a', target: 'b' },
{ source: 'b', target: 'c' },
{ source: 'c', target: 'a' },
]
// Create a config to map your data into Cosmograph's internal format
const dataConfig = {
points: {
pointIdBy: 'id',
},
links: {
linkSourceBy: 'source',
linkTargetsBy: ['target'],
},
}
const createCosmograph = async (container: HTMLElement): Promise
// Prepare data and config for Cosmograph
const result = await prepareCosmographData(dataConfig, rawPoints, rawLinks)
// Create Cosmograph instance from prepared data and config
if (result) {
const { points, links, cosmographConfig } = result
const cosmograph = new Cosmograph(container, { points, links, ...cosmographConfig })
}
}
// Render Cosmograph in the provided container
createCosmograph(document.getElementById('cosmograph-container'))
``
Check out the Cosmograph documentation for more information and examples.
While currently closed source, we welcome your feedback! Help improve Cosmograph by submitting bug reports and feature ideas in our issues repository.
Cosmograph is licensed under the CC-BY-NC-4.0 license and free for any non-commercial usage. If you want to use it in a commercial project, please reach out to us.
@cosmograph/react - Cosmograph for React applications\
@cosmos.gl/graph - Cosmos.gl graph-rendering engine\
py_cosmograph - Jupyter widget for data science workflows in Python
🌎 cosmograph.app\
📩 hi@cosmograph.app\
👾 Cosmograph Discord channel