# @graspologic/renderer-glsl

> Graph data visualization core renderer (GLSL Code)

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

## Install

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

## 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.6.1 |
| Published | 2021-12-08 |
| First published | 2020-11-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 44.7 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-glsl
- Repository: https://github.com/microsoft/graspologic-js
- npm.io page: https://npm.io/package/@graspologic/renderer-glsl

## Recent versions

- 0.6.1 (latest) — 2021-12-08
- 0.7.0-13 (prerelease) — 2021-03-23
- 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
- 0.7.0-2 — 2020-12-11
- 0.7.0-1 — 2020-12-11
- … 7 more at https://npm.io/package/@graspologic/renderer-glsl/versions

## README

**This repository is the result of research efforts that are no longer active. It has been marked read-only on GitHub to preserve the public code, but is no longer maintained or accepting contributions.**

# graspologic-js

![CI](https://github.com/microsoft/graspologic-js/workflows/CI/badge.svg)

## 📄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**](https://reactjs.org/) 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**](https://github.com/microsoft/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](https://caniuse.com/#feat=webgl2)

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

```sh
npm install @graspologic/react
```

Add the GraphView component to your app

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

```sh
npm install @graspologic/renderer
```

```js
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](./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](https://opensource.microsoft.com/codeofconduct/).
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

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