Customizable Network Graph JavaScript Library – Orb.js

Preview:

Description:

Orb.js is a robust JavaScript library that allows developers to generate customizable, interactive network graphs using the power of HTML5 Canvas.

Can be used to represent relationships and connections between various entities, known as nodes or vertices, with the connections between them called edges or links. Ideal for social networks, organizational charts, flow diagrams, tree structures, etc.

Basic Usage:

1. Install and import the Orb.js.

# NPM
$ npm install @memgraph/orb

// ES Module
import { Orb } from '@memgraph/orb';
// Browser
<script src="/dist/browser/orb.min.js"></script>

2. Create a container to hold the network graph.

<div id="example"></div>

3. Initialize the Orb.js.

const container = document.getElementById("graph");
// The first Orb is just a namespace of the JS package
const myGraph = new Orb.Orb(container);

4. Add your data (nodes and edges) to the graph.

const nodes = [
  { id: 1, label: "CSS" },
  { id: 2, label: "Script" },
  { id: 3, label: "Com" },
];
const edges = [
  { id: 1, start: 1, end: 2, label: "Lable 1" },
  { id: 2, start: 2, end: 3, label: "Lable 2" },
];

myChart.data.setup({ nodes, edges });

5. Render the network graph on the page.

myChart.view.render(() => {
  myChart.view.recenter();
});