Skip to content

Commit 908dc59

Browse files
AlexIchenskiyAlexIchenskiy
committed
New: Add more docs examples
1 parent 78ba5c1 commit 908dc59

21 files changed

Lines changed: 411 additions & 2158 deletions

File tree

‎README.md‎

Lines changed: 47 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -18,45 +18,51 @@
1818

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

21-
Orb is a graph visualization library. Read more about Orb in the following guides:
21+
Orb is a graph visualization library. It renders interactive graphs on the 2D Canvas or on
22+
WebGL, runs force-directed (CPU or GPU), circular, grid, and hierarchical layouts, plots
23+
geo-located nodes on a map, and gives you full control over the style of every node and edge.
2224

23-
* [Handling nodes and edges](./docs/data.md)
24-
* [Styling nodes and edges](./docs/styles.md)
25-
* [Handling events](./docs/events.md)
26-
* Using different views
27-
* [Default view](./docs/view-default.md)
28-
* [Map view](./docs/view-map.md)
25+
## Documentation
2926

30-
## Install
27+
Full guides, the API reference, and live interactive demos are on the documentation site:
28+
29+
**https://memgraph.github.io/orb/**
30+
31+
Some good places to start:
32+
33+
* [Getting started](https://memgraph.github.io/orb/introduction/getting-started)
34+
* [Graph data](https://memgraph.github.io/orb/concepts/data) - nodes, edges, and updates
35+
* [Styling](https://memgraph.github.io/orb/concepts/styling) - colors, shapes, borders, labels
36+
* [Events](https://memgraph.github.io/orb/concepts/events) and [Interaction](https://memgraph.github.io/orb/concepts/interaction)
37+
* [Layouts](https://memgraph.github.io/orb/layouts/overview) - force, GPU, and static layouts
38+
* [Canvas vs WebGL](https://memgraph.github.io/orb/rendering/renderers)
39+
* [Map view](https://memgraph.github.io/orb/views/map)
40+
* [API reference](https://memgraph.github.io/orb/reference/api)
3141

32-
> **Important note**: Please note that there might be breaking changes in minor version upgrades until
33-
> the Orb reaches version 1.0.0, so we recommend to either set strict version (`@memgraph/orb: "0.x.y"`)
34-
> of the Orb in your `package.json` or to allow only fix updates (`@memgraph/orb: "~0.x.y"`).
42+
## Install
3543

3644
### With `npm` (recommended)
3745

3846
```
3947
npm install @memgraph/orb
4048
```
4149

42-
Below you can find a simple Typescript example using Orb to visualize a small graph. Feel
43-
free to check other JavaScript examples in `examples/` directory.
44-
4550
```typescript
4651
import { OrbView } from '@memgraph/orb';
52+
4753
const container = document.getElementById('graph');
4854

49-
const nodes: MyNode[] = [
55+
const nodes = [
5056
{ id: 1, label: 'Orb' },
5157
{ id: 2, label: 'Graph' },
5258
{ id: 3, label: 'Canvas' },
5359
];
54-
const edges: MyEdge[] = [
60+
const edges = [
5561
{ id: 1, start: 1, end: 2, label: 'DRAWS' },
5662
{ id: 2, start: 2, end: 3, label: 'ON' },
5763
];
5864

59-
const orb = new OrbView<MyNode, MyEdge>(container);
65+
const orb = new OrbView(container);
6066

6167
// Initialize nodes and edges
6268
orb.data.setup({ nodes, edges });
@@ -73,69 +79,24 @@ orb.render(() => {
7379
> link. Graph simulation will use the main thread, which will affect performance.
7480
7581
```html
76-
<!-- Direct reference non-minified -->
77-
<script src="dist/browser/orb.js"></script>
78-
<!-- Direct reference minified -->
79-
<script src="dist/browser/orb.min.js"></script>
80-
81-
<!-- unpkg CDN non-minified -->
82-
<script src="https://unpkg.com/@memgraph/orb/dist/browser/orb.js"></script>
8382
<!-- unpkg CDN minified -->
8483
<script src="https://unpkg.com/@memgraph/orb/dist/browser/orb.min.js"></script>
84+
<script>
85+
// `Orb` is the global namespace of the UMD bundle.
86+
const orb = new Orb.OrbView(document.getElementById('graph'));
87+
orb.data.setup({ nodes, edges });
88+
orb.render(() => orb.recenter());
89+
</script>
8590
```
8691

87-
Below you can find a simple JavaScript example using Orb to visualize a small graph. Feel
88-
free to check other JavaScript examples in `examples/` directory.
89-
90-
```html
91-
<!DOCTYPE html>
92-
<html lang="en">
93-
<head>
94-
<meta charset="UTF-8" />
95-
<title>Orb | Simple graph</title>
96-
<script src="https://unpkg.com/@memgraph/orb/dist/browser/orb.min.js"></script>
97-
<style>
98-
#graph {
99-
border: 1px solid #e0e0e0;
100-
width: 600px;
101-
height: 600px;
102-
}
103-
</style>
104-
</head>
105-
<body>
106-
<div id="graph"></div>
107-
<script>
108-
const container = document.getElementById("graph");
109-
110-
const nodes = [
111-
{ id: 1, label: "Orb" },
112-
{ id: 2, label: "Graph" },
113-
{ id: 3, label: "Canvas" },
114-
];
115-
const edges = [
116-
{ id: 1, start: 1, end: 2, label: "DRAWS" },
117-
{ id: 2, start: 2, end: 3, label: "ON" },
118-
];
119-
120-
// First `Orb` is just a namespace of the JS package
121-
const orb = new Orb.OrbView(container);
122-
123-
// Initialize nodes and edges
124-
orb.data.setup({ nodes, edges });
125-
126-
// Render and recenter the view
127-
orb.render(() => {
128-
orb.recenter();
129-
});
130-
</script>
131-
</body>
132-
</html>
133-
```
92+
See the [getting started guide](https://memgraph.github.io/orb/introduction/getting-started)
93+
for a complete runnable example.
13494

13595
## Build
13696

13797
```
138-
npm run build
98+
npm run build # type-check + emit (tsc)
99+
npm run build:release # tsc + webpack browser bundle (dist/browser/)
139100
```
140101

141102
## Test
@@ -146,30 +107,38 @@ npm run test
146107

147108
## Development
148109

149-
If you want to experiment, contribute, or simply play with the Orb locally, you can
150-
set up your local development environment with:
110+
If you want to experiment, contribute, or simply play with Orb locally:
151111

152-
* Installation of all project dependencies
112+
* Install dependencies
153113

154114
```
155115
npm install
156116
```
157117

158-
* Running webpack build in the watch mode
118+
* Rebuild the browser bundle on change
159119

160120
```
161121
npm run webpack:watch
162122
```
163123

164-
* Running a local http server that will serve Orb and `examples/` directory on `localhost:8080`
124+
* Serve the built bundle from `dist/browser/` on `localhost:8082`
165125

166126
```
167127
npm run serve
168128
```
169129

130+
* Lint
131+
132+
```
133+
npm run lint
134+
```
135+
136+
To work on the documentation site itself, see `docs/site/` (a self-contained VitePress
137+
project with its own `package.json`).
138+
170139
## License
171140

172-
Copyright (c) 2016-2022 [Memgraph Ltd.](https://memgraph.com)
141+
Copyright (c) 2016-present [Memgraph Ltd.](https://memgraph.com)
173142

174143
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
175144
this file except in compliance with the License. You may obtain a copy of the

‎docs/assets/view-default-fixed.png‎

-30.6 KB
Binary file not shown.

‎docs/assets/view-default-simulated.png‎

-30.3 KB
Binary file not shown.

‎docs/assets/view-map-example.png‎

-344 KB
Binary file not shown.

0 commit comments

Comments
 (0)