graspologic-js

📄Overview

graspologic-js is a high-performance graph toolkit for the web.

Features

• A fast, memory-efficient, graph renderer.
  • WebGL based engine that can handle hundreds of thousands or even millions of nodes.
  • Utilizes SharedArrayBuffer for efficient and fast memory storage that can be shared between the UI thread and Web Workers, allowing for blazing fast layout algorithms that display output in real-time.
  • Supports ReactJS or standalone.
• Contains experimental implementations of a few popular graph layout algorithms that work directly with the graph renderer.

graspologic-js is a companion library to graspologic, which is a python library for intelligently building networks and network embeddings, and for analyzing connected data.

🌐Browser Compatibility

Any browser which supports WebGL2. To see which browsers support WebGL2, please see caniuse.com

It is recommended that you use a JavaScript bundling tool, such as Webpack or Browserify, as graspologic-js only exports CommonJS and ECMAScript module formats. It does not provide a web-friendly bundle in order to allow bundling tools to use tree-shaking to minimize dependency size.

It is also recommended that your bundler targets the following browser versions in order to minimize the amount of polyfills, which can adversely affect performance:

• Edge 79+
• Firefox 60+
• Chrome 72+

🔥 2 Minute Quick Start

React

Install the @graspologic/react dependency

npm install @graspologic/react

Add the GraphView component to your app

import React, { useMemo } from 'react'
import { GraphView } from '@graspologic/react'
export default () => {
	const data = useMemo(
		() => ({
			// Pass in your data here
			nodes: [],
			edges: [],
		}),
		[],
	)
	return <GraphView style={{ width: '100%', height: '100%' }} data={data} />
}

Standalone

Install the @graspologic/renderer dependency

npm install @graspologic/renderer

import { WebGLGraphRenderer } from '@graspologic/renderer'
import { GraphContainer } from '@graspologic/graph'

function createRenderer(width, height) {
	// Create a renderer and add it to the container
	const renderer = WebGLGraphRenderer.createInstance({
		width,
		height,
	})

	// Load the dataset
	renderer.load(
		GraphContainer.intern({
			// Pass in your data here
			nodes: [],
			edges: [],
		}),
	)

	// Start rendering
	renderer.start()

	// Return the container
	return renderer
}

// ...elsewhere in your app

// Instantiate the renderer
const renderer = createRenderer(500, 500)

// Add the renderer's canvas to your container element
containerElement.appendChild(renderer.view)

You can see more examples in the examples folder.

✅ License

Under the permissive MIT license

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.