A high-performance modern set of graph rendering components, which enables users to visualize large graph datasets on the web.
OTHER License
graspologic-js is a high-performance graph toolkit for the web.
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.
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:
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} />
}
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.
Under the permissive MIT license
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 [email protected] with any additional questions or comments.