Get started

Installation

Cosmograph is available on NPM as a React @cosmograph/react library or vanilla TypeScript library @cosmograph/cosmograph.

React

npm install -P @cosmograph/react

JS/TS

npm install -P @cosmograph/cosmograph

Preparing data

Cosmograph expects the data to be nodes and links arrays:

const nodes: Node[] = [...]
const links: Link[] = [...]

note

You don't need TypeScript to use Cosmograph. But we'll still provide TypeScript types across the documentation as a reference.

Each node object needs to have a unique identifier specified in the id property. You can optionally provide starting positions for each node using the x and y properties. The links will need to have the source and target properties referencing specific nodes by their unique id.

type Node = {
  id: string;
  x?: number;
  y?: number;
}

type Link = {
  source: string;
  target: string;
}

Initializing the graph

After your data is ready, you can initialize Cosmograph by defining its configuration and passing the data. The way to do it will depend on whether you use React or plain JavaScript. Below you can find an example code of how you can initialize Cosmograph with a simple configuration.

info

While Cosmograph doesn't have adaptors to other UI frameworks besides React, you can still integrate it into your Angular, Vue, Svelte, or other app, by using JavaScript code.

React

import { Cosmograph } from '@cosmograph/react'

export function GraphVisualization ({ nodes, links }) {
  return (<Cosmograph
    nodes={nodes}
    links={links}
    nodeColor={d => d.color}
    nodeSize={20}
    linkWidth={2}
  />)
}

JS/TS

import { Cosmograph } from '@cosmograph/cosmograph'

// Create an HTML element
const targetElement = document.createElement('div')
document.body.appendChild(targetElement)

// Define the configuration (CosmographInputConfig<Node, Link>)
const config = {
  nodeColor: d => d.color,
  nodeSize: 20,
  linkWidth: 2,
  // ... 
}

// Create a Cosmograph instance with the target element
const cosmograph = new Cosmograph(targetElement, config)

// Set the data
cosmograph.setData(nodes, links)

Data

export const nodes = [
  { id: '1', color: '#88C6FF' },
  { id: '2', color: '#FF99D2' },
  { id: '3', color: [227,17,108, 1] }, // Faster than providing a hex value
]

export const links = [
  { source: '1', target: '2' },
  { source: '1', target: '3' },
  { source: '2', target: '3' },
]

Loading...