@cosmograph/cosmograph

🪐 Cosmograph

A powerful JavaScript graph visualization library powered by @cosmograph/cosmos – 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.

✨ Features

• Easily process millions of points and edges on modern hardware
• Ready-to-use interactive components: timeline, histograms and legends
• Handy features like clustering, labels, dragging points and area selection
• Rich configuration API for full customization over graph behavior and appearance
• Support for standard data formats including .csv, .parquet, .arrow and .json
• SQL capabilities for powerful data transformations and filtering
• Connect directly to your tables in external DuckDB instances
• TypeScript support featuring comprehensive types and API hints

🚀 Quick Start

Install the package:

npm install @cosmograph/cosmograph@beta

Get the data, configure the graph and render Cosmograph in the provided container:

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<void> => {
  // 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.

🛸 Issues and Contributing

While currently closed source, we welcome your feedback! Help improve Cosmograph by submitting bug reports and feature ideas in our issues repository.

💫 License

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 Universe

@cosmograph/react - Cosmograph for React applications
@cosmograph/cosmos - Cosmos graph-rendering engine
py_cosmograph - Jupyter widget for data science workflows in Python

👩🏻‍🚀 Contacts

🌎 cosmograph.app
📩 [e-mail]
👾 Cosmograph Discord channel