https://github.com/memgraph/orb

Graph visualization library
https://github.com/memgraph/orb

canvas d3 graph javascript network typescript

Last synced: 4 days ago
JSON representation

Graph visualization library

• Host: GitHub
• URL: https://github.com/memgraph/orb
• Owner: memgraph
• License: apache-2.0
• Created: 2022-07-04T17:23:40.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-15T07:39:18.000Z (5 months ago)
• Last Synced: 2024-12-13T13:02:28.339Z (11 days ago)
• Topics: canvas, d3, graph, javascript, network, typescript
• Language: TypeScript
• Homepage:
• Size: 1.87 MB
• Stars: 369
• Watchers: 5
• Forks: 18
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        

![](./docs/assets/logo.png)



  

    

  

  

    

  

  

    

  

  

    

  



![](./docs/assets/graph-example.png)

Orb is a graph visualization library. Read more about Orb in the following guides:

* [Handling nodes and edges](./docs/data.md)

* [Styling nodes and edges](./docs/styles.md)

* [Handling events](./docs/events.md)

* Using different views

  * [Default view](./docs/view-default.md) 

  * [Map view](./docs/view-map.md)

## Install

> **Important note**: Please note that there might be breaking changes in minor version upgrades until

> the Orb reaches version 1.0.0, so we recommend to either set strict version (`@memgraph/orb: "0.x.y"`)

> of the Orb in your `package.json` or to allow only fix updates (`@memgraph/orb: "~0.x.y"`).

### With `npm` (recommended)

```

npm install @memgraph/orb

```

Below you can find a simple Typescript example using Orb to visualize a small graph. Feel

free to check other JavaScript examples in `examples/` directory.

```typescript

import { Orb } from '@memgraph/orb';

const container = document.getElementById('graph');

const nodes: MyNode[] = [

  { id: 1, label: 'Orb' },

  { id: 2, label: 'Graph' },

  { id: 3, label: 'Canvas' },

];

const edges: MyEdge[] = [

  { id: 1, start: 1, end: 2, label: 'DRAWS' },

  { id: 2, start: 2, end: 3, label: 'ON' },

];

const orb = new Orb(container);

// Initialize nodes and edges

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

// Render and recenter the view

orb.view.render(() => {

  orb.view.recenter();

});

```

### With a direct link

> Note: Simulation with web workers is not supported when Orb is used with a direct

> link. Graph simulation will use the main thread, which will affect performance.

```html

```

Below you can find a simple JavaScript example using Orb to visualize a small graph. Feel

free to check other JavaScript examples in `examples/` directory.

```html

  

    

    Orb | Simple graph

    

    

      #graph {

        border: 1px solid #e0e0e0;

        width: 600px;

        height: 600px;

      }

    

  

  

    


    

      const container = document.getElementById("graph");

    

      const nodes = [

        { id: 1, label: "Orb" },

        { id: 2, label: "Graph" },

        { id: 3, label: "Canvas" },

      ];

      const edges = [

        { id: 1, start: 1, end: 2, label: "DRAWS" },

        { id: 2, start: 2, end: 3, label: "ON" },

      ];

    

      // First `Orb` is just a namespace of the JS package 

      const orb = new Orb.Orb(container);

    

      // Initialize nodes and edges

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

    

      // Render and recenter the view

      orb.view.render(() => {

        orb.view.recenter();

      });

    

  


```

## Build

```

npm run build

```

## Test

```

npm run test

```

## Development

If you want to experiment, contribute, or simply play with the Orb locally, you can

set up your local development environment with:

* Installation of all project dependencies

  ```

  npm install

  ```

* Running webpack build in the watch mode

  ```

  npm run webpack:watch

  ```

* Running a local http server that will serve Orb and `examples/` directory on `localhost:8080`

  ```

  npm run serve

  ```

## License

Copyright (c) 2016-2022 [Memgraph Ltd.](https://memgraph.com)

Licensed under the Apache License, Version 2.0 (the "License"); you may not use

this file except in compliance with the License. You may obtain a copy of the

License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed

under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR

CONDITIONS OF ANY KIND, either express or implied. See the License for the

specific language governing permissions and limitations under the License.