# @graspologic/renderer

> Graph data visualization core renderer

Latest version **0.7.0** (published 2021-12-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @graspologic/renderer
pnpm add @graspologic/renderer
yarn add @graspologic/renderer
bun add @graspologic/renderer
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2021-12-08 |
| First published | 2020-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 20 |
| Unpacked size | 413.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Chris Trevino (chtrevin@microsoft.com) |
| Maintainers | darthtrevino, stopyoukid, essexbot, natoverse |

## Links

- npm: https://www.npmjs.com/package/@graspologic/renderer
- Repository: https://github.com/microsoft/graspologic-js
- npm.io page: https://npm.io/package/@graspologic/renderer

## Dependencies (20)

- [math.gl](https://npm.io/package/math.gl.md) ^3.5.6
- [typedoc](https://npm.io/package/typedoc.md) 0.22.10
- [invariant](https://npm.io/package/invariant.md) ^2.2.4
- [mjolnir.js](https://npm.io/package/mjolnir.js.md) ^2.6.0
- [@luma.gl/webgl](https://npm.io/package/@luma.gl/webgl.md) ^8.5.10
- [@luma.gl/engine](https://npm.io/package/@luma.gl/engine.md) ^8.5.10
- [@luma.gl/gltools](https://npm.io/package/@luma.gl/gltools.md) ^8.5.10
- [@graspologic/graph](https://npm.io/package/@graspologic/graph.md) 0.7.0
- [@luma.gl/constants](https://npm.io/package/@luma.gl/constants.md) ^8.5.10
- [@graspologic/camera](https://npm.io/package/@graspologic/camera.md) 0.7.0
- [@graspologic/common](https://npm.io/package/@graspologic/common.md) 0.7.0
- [@graspologic/memstore](https://npm.io/package/@graspologic/memstore.md) 0.7.0
- [@graspologic/animation](https://npm.io/package/@graspologic/animation.md) 0.7.0
- [@graspologic/luma-utils](https://npm.io/package/@graspologic/luma-utils.md) 0.7.0
- [@essex-js-toolkit/toolbox](https://npm.io/package/@essex-js-toolkit/toolbox.md) ^1.1.5
- [@graspologic/renderer-glsl](https://npm.io/package/@graspologic/renderer-glsl.md) 0.6.1
- [@graspologic/renderables-base](https://npm.io/package/@graspologic/renderables-base.md) 0.7.0
- [@graspologic/renderables-edges](https://npm.io/package/@graspologic/renderables-edges.md) 0.7.0
- [@graspologic/renderables-nodes](https://npm.io/package/@graspologic/renderables-nodes.md) 0.7.0
- [@graspologic/renderables-support](https://npm.io/package/@graspologic/renderables-support.md) 0.7.0

## Recent versions

- 0.7.0 (latest) — 2021-12-08
- 0.7.0-13 (prerelease) — 2021-03-23
- 0.4.1-beta.14.0 (beta.14) — 2020-09-11
- 0.4.0 (local.1) — 2020-09-10
- 0.7.0-12 — 2021-03-04
- 0.7.0-11 — 2021-03-04
- 0.7.0-10 — 2021-03-01
- 0.7.0-9 — 2021-02-23
- 0.7.0-8 — 2021-02-22
- 0.7.0-7 — 2021-01-11
- 0.7.0-6 — 2021-01-11
- 0.7.0-5 — 2020-12-23
- 0.7.0-4 — 2020-12-23
- 0.7.0-3 — 2020-12-23
- 0.0.7-3 — 2020-12-23
- … 9 more at https://npm.io/package/@graspologic/renderer/versions

## README

# @graspologic/renderer

Contains the **graspologic-js** graph renderer.

React bindings are also available [here](../react/README.md).

## Basic Usage

```js
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

```js
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](./dist/docs/globals.md) or [examples](../../../examples) for additional examples.

---
_Source: https://npm.io/package/@graspologic/renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._