{"id":15760577,"url":"https://github.com/memgraph/orb","last_synced_at":"2025-05-15T04:02:52.171Z","repository":{"id":58213936,"uuid":"510446401","full_name":"memgraph/orb","owner":"memgraph","description":"Graph visualization library","archived":false,"fork":false,"pushed_at":"2025-03-11T22:40:22.000Z","size":1961,"stargazers_count":380,"open_issues_count":22,"forks_count":18,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-02T06:45:09.780Z","etag":null,"topics":["canvas","d3","graph","javascript","network","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/memgraph.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-04T17:23:40.000Z","updated_at":"2025-03-22T06:55:40.000Z","dependencies_parsed_at":"2024-02-28T11:31:01.910Z","dependency_job_id":"5a8a055d-7cd7-4664-ad95-df762cf07a7d","html_url":"https://github.com/memgraph/orb","commit_stats":{"total_commits":54,"total_committers":4,"mean_commits":13.5,"dds":"0.37037037037037035","last_synced_commit":"90df706679b392e21f8f8f73deb775f8db812648"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/memgraph%2Forb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/memgraph%2Forb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/memgraph%2Forb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/memgraph%2Forb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/memgraph","download_url":"https://codeload.github.com/memgraph/orb/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247999856,"owners_count":21031046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","d3","graph","javascript","network","typescript"],"created_at":"2024-10-04T10:58:57.408Z","updated_at":"2025-04-09T08:00:19.532Z","avatar_url":"https://github.com/memgraph.png","language":"TypeScript","readme":"\n![](./docs/assets/logo.png)\n\n\u003cp\u003e\n  \u003ca href=\"https://github.com/memgraph/orb/actions\"\u003e\n    \u003cimg src=\"https://github.com/memgraph/orb/workflows/Build%20and%20test/badge.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/memgraph/orb/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/memgraph/orb\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@memgraph/orb\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@memgraph/orb\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/memgraph/orb/stargazers\" alt=\"Stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/memgraph/orb?style=social\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n![](./docs/assets/graph-example.png)\n\nOrb is a graph visualization library. Read more about Orb in the following guides:\n\n* [Handling nodes and edges](./docs/data.md)\n* [Styling nodes and edges](./docs/styles.md)\n* [Handling events](./docs/events.md)\n* Using different views\n  * [Default view](./docs/view-default.md) \n  * [Map view](./docs/view-map.md)\n\n## Install\n\n\u003e **Important note**: Please note that there might be breaking changes in minor version upgrades until\n\u003e the Orb reaches version 1.0.0, so we recommend to either set strict version (`@memgraph/orb: \"0.x.y\"`)\n\u003e of the Orb in your `package.json` or to allow only fix updates (`@memgraph/orb: \"~0.x.y\"`).\n\n### With `npm` (recommended)\n\n```\nnpm install @memgraph/orb\n```\n\nBelow you can find a simple Typescript example using Orb to visualize a small graph. Feel\nfree to check other JavaScript examples in `examples/` directory.\n\n```typescript\nimport { Orb } from '@memgraph/orb';\nconst container = document.getElementById('graph');\n\nconst nodes: MyNode[] = [\n  { id: 1, label: 'Orb' },\n  { id: 2, label: 'Graph' },\n  { id: 3, label: 'Canvas' },\n];\nconst edges: MyEdge[] = [\n  { id: 1, start: 1, end: 2, label: 'DRAWS' },\n  { id: 2, start: 2, end: 3, label: 'ON' },\n];\n\nconst orb = new Orb\u003cMyNode, MyEdge\u003e(container);\n\n// Initialize nodes and edges\norb.data.setup({ nodes, edges });\n\n// Render and recenter the view\norb.view.render(() =\u003e {\n  orb.view.recenter();\n});\n```\n\n### With a direct link\n\n\u003e Note: Simulation with web workers is not supported when Orb is used with a direct\n\u003e link. Graph simulation will use the main thread, which will affect performance.\n\n```html\n\u003c!-- Direct reference non-minified --\u003e\n\u003cscript src=\"dist/browser/orb.js\"\u003e\u003c/script\u003e\n\u003c!-- Direct reference minified --\u003e\n\u003cscript src=\"dist/browser/orb.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- unpkg CDN non-minified --\u003e\n\u003cscript src=\"https://unpkg.com/@memgraph/orb/dist/browser/orb.js\"\u003e\u003c/script\u003e\n\u003c!-- unpkg CDN minified --\u003e\n\u003cscript src=\"https://unpkg.com/@memgraph/orb/dist/browser/orb.min.js\"\u003e\u003c/script\u003e\n```\n\nBelow you can find a simple JavaScript example using Orb to visualize a small graph. Feel\nfree to check other JavaScript examples in `examples/` directory.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003eOrb | Simple graph\u003c/title\u003e\n    \u003cscript src=\"https://unpkg.com/@memgraph/orb/dist/browser/orb.min.js\"\u003e\u003c/script\u003e\n    \u003cstyle\u003e\n      #graph {\n        border: 1px solid #e0e0e0;\n        width: 600px;\n        height: 600px;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"graph\"\u003e\u003c/div\u003e\n    \u003cscript\u003e\n      const container = document.getElementById(\"graph\");\n    \n      const nodes = [\n        { id: 1, label: \"Orb\" },\n        { id: 2, label: \"Graph\" },\n        { id: 3, label: \"Canvas\" },\n      ];\n      const edges = [\n        { id: 1, start: 1, end: 2, label: \"DRAWS\" },\n        { id: 2, start: 2, end: 3, label: \"ON\" },\n      ];\n    \n      // First `Orb` is just a namespace of the JS package \n      const orb = new Orb.Orb(container);\n    \n      // Initialize nodes and edges\n      orb.data.setup({ nodes, edges });\n    \n      // Render and recenter the view\n      orb.view.render(() =\u003e {\n        orb.view.recenter();\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Build\n\n```\nnpm run build\n```\n\n## Test\n\n```\nnpm run test\n```\n\n## Development\n\nIf you want to experiment, contribute, or simply play with the Orb locally, you can\nset up your local development environment with:\n\n* Installation of all project dependencies\n\n  ```\n  npm install\n  ```\n\n* Running webpack build in the watch mode\n\n  ```\n  npm run webpack:watch\n  ```\n\n* Running a local http server that will serve Orb and `examples/` directory on `localhost:8080`\n\n  ```\n  npm run serve\n  ```\n\n## License\n\nCopyright (c) 2016-2022 [Memgraph Ltd.](https://memgraph.com)\n\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\nthis file except in compliance with the License. You may obtain a copy of the\nLicense at\n\n     http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed\nunder the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR\nCONDITIONS OF ANY KIND, either express or implied. See the License for the\nspecific language governing permissions and limitations under the License.\n","funding_links":[],"categories":["Graph Visualization","TypeScript"],"sub_categories":["Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmemgraph%2Forb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmemgraph%2Forb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmemgraph%2Forb/lists"}