Get started
Installation
Cosmograph
is available on NPM as a React @cosmograph/react library or vanilla TypeScript library
@cosmograph/cosmograph.
- React
- JS/TS
npm install -P @cosmograph/react
npm install -P @cosmograph/cosmograph
Preparing data
Cosmograph expects the data to be nodes and links arrays:
const nodes: Node[] = [...]
const links: Link[] = [...]
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.
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
- JS/TS
- Data
import { Cosmograph } from '@cosmograph/react'
export function GraphVisualization ({ nodes, links }) {
return (<Cosmograph
nodes={nodes}
links={links}
nodeColor={d => d.color}
nodeSize={20}
linkWidth={2}
/>)
}
import { Cosmograph } from '@cosmograph/cosmograph'
// Create an HTML canvas element
const canvas = document.createElement('canvas')
document.body.appendChild(canvas)
// Define the configuration (CosmographInputConfig<Node, Link>)
const config = {
nodeColor: d => d.color,
nodeSize: 20,
linkWidth: 2,
// ...
}
// Create a Cosmograph instance with the canvas element
const cosmograph = new Cosmograph(canvas, config)
// Set the data
cosmograph.setData(nodes, links)
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' },
]