Cosmograph: make sense of your graph and machine learning data

import { Cosmograph } from '@cosmograph/react'
 
export function GraphVisualization ({ nodes, links }) {
  return (
    <Cosmograph
      nodes={nodes}
      links={links}
      nodeColor={d => d.color}
      nodeSize={20}
      linkWidthBy={2}
    />
  )
}

import { Cosmograph } from '@cosmograph/cosmograph'
 
// Create an HTML element
const targetElement = document.createElement('div')
document.body.appendChild(targetElement)
  
// Define the configuration
const config = {
  nodeColor: d => d.color,
  nodeSize: 20,
  linkWidthBy: 2,
  // ... 
}
  
// Create a Cosmograph instance inside the targetElement 
const cosmograph = new Cosmograph(targetElement, 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] },
  { id: '4', index: 3, color: '#7B61FF' },
  { id: '5', index: 4, color: '#00D084' },
  { id: '6', index: 5, color: '#FCB900' },
]
 
export const links = [
  { source: '1', target: '2' },
  { source: '2', target: '3' },
  { source: '3', target: '1' },
  { source: '4', target: '1' },
  { source: '5', target: '2' },
  { source: '4', target: '5' },
  { source: '5', target: '6' },
]