@graspologic/renderer

Contains the graspologic-js graph renderer.

React bindings are also available here.

Basic Usage

import { WebGLGraphRenderer } from '@graspologic/renderer'
import { GraphContainer } from '@graspologic/graph'
 
// Simple graph dataset
const GRAPH_DATA = {
    nodes: [
        {
            id: 'A',
            x: -10,
            y: 10,
            z: 0,
            radius: 5,
 
            // Format 0xBBGGRR
            color: 0x00ff00,
        },
        {
            id: 'B',
            x: 10,
            y: 10,
            z: 0,
            radius: 5,
 
            // Format 0xBBGGRR
            color: 0xff0000,
        },
    ],
    edges: [
        {
            source: 'A',
            target: 'B',
            weight: 1,
        },
    ],
}
 
function createRenderer(data, width, height) {
    // Create a renderer and add it to the container
    const renderer = WebGLGraphRenderer.createInstance({
        width,
        height,
 
        // Set the min/max width of the edges to be a constant width
        edgeMinWidth: 5,
        edgeMaxWidth: 5,
 
        // All edges are completely opaque
        edgeAlpha: 1,
    })
 
    // Load the dataset
    renderer.load(GraphContainer.intern(data))
 
    // Start rendering
    renderer.start()
 
    return renderer
}
 
export default () => {
    // Create the renderer
    const renderer = createRenderer(GRAPH_DATA, 200, 200)
 
    // Return the renderer's canvas to the docs site, so it can be viewed
    return renderer.view
}

Extended Usage

import {
    WebGLGraphRenderer,
    enableClickEvents,
    VertexSetRenderable,
} from '@graspologic/renderer'
import { GraphContainer } from '@graspologic/graph'
import { exampleData, utils } from 'docs'
 
function createRenderer(data, width, height) {
    // Create a renderer and add it to the container
    const renderer = WebGLGraphRenderer.createInstance({
        width,
        height,
 
        // Set the min/max width of the edges to be a constant width
        edgeMinWidth: 5,
        edgeMaxWidth: 5,
 
        // All edges are completely opaque
        edgeAlpha: 1,
 
        // Control the sizing of the nodes
        nodeMinRadius: 5,
        nodeMaxRadius: 5,
    })
 
    // A function which takes a "group" property from a node and returns a color
    const categoricalColorizer = utils.createColorizer()
 
    // Load the dataset
    renderer.load(GraphContainer.intern(data), categoricalColorizer)
 
    // Enable the click events
    enableClickEvents(renderer)
 
    // Add a renderer that highlights hovered nodes
    const renderable = new VertexSetRenderable(renderer.gl)
    renderable.color = [0.5, 0.5, 0.8, 1]
    renderer.scene.addRenderable(renderable)
    renderer.on('vertexHovered', hovered => {
        renderable.setData(hovered ? [hovered] : [])
    })
 
    // Start rendering
    renderer.start()
 
    return renderer
}
 
const GRAPH_DATA = exampleData.smallGraph()
export default () => {
    // Create the renderer
    const renderer = createRenderer(GRAPH_DATA, 600, 300)
    let selectedNodeIds = []
 
    renderer.on('vertexClick', id => {
        console.log('click', id)
        if (id) {
            if (selectedNodeIds.indexOf(id) === -1) {
                selectedNodeIds = [...selectedNodeIds, id]
            } else {
                selectedNodeIds = selectedNodeIds.filter(v => v !== id)
            }
        }
    })
 
    // Return the renderer's canvas to the docs site, so it can be viewed
    return renderer.view
}

See the API documentation or examples for additional examples.