# VivaGraphJS: A JavaScript Graph Library with SVG and WebGL Renderers

> VivaGraphJS is a BSD-3-Clause JavaScript library for rendering force-directed graphs in the browser, using either SVG or WebGL. It is designed around extensible renderers and layout algorithms through the ngraph module family.

**anvaka/VivaGraphJS** — Graph drawing library for JavaScript

- Repository: https://github.com/anvaka/VivaGraphJS
- Stars: 3,862 · Forks: 418
- Language: JavaScript
- License: NOASSERTION
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/anvaka-vivagraphjs

## A Graph Library Built on the ngraph Module Ecosystem

VivaGraphJS is a JavaScript library for rendering graphs in the browser. The README describes it as designed to be extensible and to support different rendering engines and layout algorithms. Starting from version 0.7.x, the underlying algorithms were extracted into the ngraph family of npm modules, and VivaGraphJS is assembled from those modules.

The ngraph family includes modules for force layout (ngraph.forcelayout), centrality calculations (ngraph.centrality), JSON import and export (ngraph.fromjson, ngraph.tojson), graph generators (ngraph.generators), and more. The README notes that the full family can be found by searching npm for 'ngraph'. This modular structure means the rendering layer and the graph data layer are separate packages.

The library has been used in production applications. The README lists three real-world examples: an Amazon related-product visualizer using SVG, a sparse matrix collection visualizer using WebGL, and a social graph of the Russian social network vk.com using WebGL. These examples demonstrate that both rendering backends have been used for substantial datasets.

The current version is 0.12.0, as shown in package.json. The license is BSD-3-Clause per package.json, though the repository-level license field shows NOASSERTION.

## Getting Started: A Graph in Four Lines

Include vivagraph.js from the dist folder to use the library. The minimum code to render a graph with two nodes and one edge is:

```javascript
var graph = Viva.Graph.graph();
graph.addLink(1, 2);

var renderer = Viva.Graph.View.renderer(graph);
renderer.run();
```

This renders a graph inside document.body using SVG by default. The addLink call creates both nodes if they do not already exist. The equivalent explicit form is:

```javascript
var graph = Viva.Graph.graph();
graph.addNode(1);
graph.addNode(2);
graph.addLink(1, 2);

var renderer = Viva.Graph.View.renderer(graph);
renderer.run();
```

To render into a specific DOM element instead of document.body, pass a container option to the renderer:

```javascript
var renderer = Viva.Graph.View.renderer(graph, {
  container: document.getElementById('graphDiv')
});
renderer.run();
```

Nodes can carry data. The README shows adding nodes with URL properties, where each node holds an object as its second argument to addNode. The graphics layer can then use that data to render custom node appearances.

## WebGL Rendering for Performance-Sensitive Graphs

The default SVG renderer works for small to medium graphs, but for large graphs the DOM overhead of individual SVG elements becomes limiting. VivaGraphJS provides a WebGL renderer for these cases.

Switching to WebGL requires creating a webglGraphics object and passing it to the renderer:

```javascript
var graph = Viva.Graph.graph();
graph.addLink(1, 2);

var graphics = Viva.Graph.View.webglGraphics();

var renderer = Viva.Graph.View.renderer(graph,
    {
        graphics : graphics
    });
renderer.run();
```

The README describes the graphics class as responsible for rendering nodes and links, and the renderer as orchestrating the process. Changing node appearance requires telling the graphics object how to represent nodes, which is separate from the layout algorithm.

The vk.com and sparse matrix examples in the README both use WebGL, indicating the WebGL path is the intended choice for large or performance-sensitive graphs. The SVG path is simpler and easier to customize with CSS.

## Tuning the Force-Directed Layout

The default layout algorithm is force-directed, implemented in the ngraph.forcelayout module. The README describes layout tuning as 'definitely one of the hardest parts of using this library'.

The forceDirected layout accepts four physics parameters:

```javascript
var layout = Viva.Graph.Layout.forceDirected(graph, {
    springLength : 10,
    springCoeff : 0.0005,
    dragCoeff : 0.02,
    gravity : -1.2
});

var renderer = Viva.Graph.View.renderer(graph, {
    layout : layout
});
renderer.run();
```

springLength controls the natural length of edges, springCoeff controls spring stiffness, dragCoeff controls damping, and gravity controls the attractive or repulsive force pulling nodes toward or away from the center. Negative gravity values push nodes outward.

Parameters can also be adjusted during a running simulation using layout.simulator.springLength(newValue) and the equivalent methods for other values. The README notes that each parameter is described in the ngraph.physics.simulator source code.

Graph generators are built into the library. The grid generator, for example, produces a rectangular grid graph:

```javascript
var graphGenerator = Viva.Graph.generator();
var graph = graphGenerator.grid(3, 3);
```

The README shows that without layout tuning, a 3x3 grid renders poorly. With the force-directed parameters adjusted, the result improves substantially.

## Building from Source and the ngraph Relationship

To build VivaGraphJS locally:

```
git clone https://github.com/anvaka/VivaGraphJS.git
cd ./VivaGraphJS
npm install
gulp release
```

The combined and minified output goes to the dist folder. The build system uses Gulp and Browserify, as shown in package.json devDependencies.

Until version 0.7.x, VivaGraphJS was a monolithic codebase. Starting from 0.7.x it was refactored into small npm modules under the ngraph namespace, and VivaGraphJS became a bundle of those modules. The ngraph family extends well beyond what VivaGraphJS bundles: the README mentions image rendering, 3D rendering, integration with Gephi (the desktop graph analysis tool), and PageRank calculation as capabilities available in the broader family.

An upgrade guide at docs/upgrade_guide.md covers migrating older versions. The README directs readers there for version migration. A CHANGELOG file is in the repository root.

## Where VivaGraphJS Falls Short

The last push was on 2026-03-06. The repository has no GitHub releases and no tags for the current 0.12.0 version. The README includes a disclaimer from the author stating the library was written to learn JavaScript and that the design approach may not be optimal.

Layout tuning is manual and requires understanding the physics parameters. The README acknowledges this is one of the hardest parts of the library and notes it should be improved in the future to simplify usage. There is no higher-level API that adapts parameters to the graph's properties automatically.

The samples project was not available at the time the repository was last updated, according to a note in the README. The dist folder in the repository contains the prebuilt library, and demos are in the demos folder, but the library lacks a guided getting-started project.

The npm dependencies in package.json include older pinned versions of ngraph modules. Whether these are current with the latest ngraph releases is not addressed in the repository.

## Cytoscape.js as the Active-Development Alternative

Cytoscape.js is an open-source JavaScript graph library maintained by the Cytoscape Consortium. It focuses on biological network visualization but is used broadly for any graph visualization task. Its API covers graph data management, layout algorithms, styling via a CSS-like selector syntax, and event handling. It ships with a large set of built-in layout algorithms and supports external layout extensions.

The key difference from VivaGraphJS is scope and maintenance. Cytoscape.js has a comprehensive API reference, active development, GitHub releases, and extensive examples. VivaGraphJS is a smaller library that delegates most algorithms to the ngraph ecosystem and requires more manual assembly.

VivaGraphJS's WebGL renderer is an advantage for large graphs where performance is critical. Cytoscape.js uses Canvas by default. For graphs with thousands of nodes where rendering performance matters more than API breadth, VivaGraphJS remains a relevant option. For most graph visualization tasks where documentation, community, and feature breadth matter more, Cytoscape.js is the more maintained choice.

## Conclusion

Frontend engineers who need to display force-directed graph visualizations in a browser, and who are comfortable with the ngraph module ecosystem and manual physics parameter tuning, will find VivaGraphJS a workable foundation. Teams that need a well-documented, actively maintained library with a broad set of built-in interaction patterns should evaluate Cytoscape.js instead. The last push to VivaGraphJS was on 2026-03-06; check the CHANGELOG and the upgrade guide before adopting it in a new project to understand what changed between versions.

## FAQ

### What is VivaGraphJS?

VivaGraphJS is a BSD-3-Clause JavaScript library for rendering force-directed graphs in the browser using SVG or WebGL. It is built on the ngraph family of npm modules and is designed around swappable renderers and layout algorithms.

### How do you switch VivaGraphJS from SVG to WebGL rendering?

Create a webglGraphics object with Viva.Graph.View.webglGraphics() and pass it as the graphics option to the renderer constructor. The default renderer uses SVG.

### What layout algorithm does VivaGraphJS use?

VivaGraphJS uses a force-directed layout algorithm from the ngraph.forcelayout module. The layout parameters springLength, springCoeff, dragCoeff, and gravity can be configured at creation time or adjusted during a running simulation.

## Sources

- [anvaka/VivaGraphJS on GitHub](https://github.com/anvaka/VivaGraphJS)
- [Issues](https://github.com/anvaka/VivaGraphJS/issues)
- [README](https://github.com/anvaka/VivaGraphJS/blob/master/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/anvaka-vivagraphjs