Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcodpt/graph
A graph element based on cytoscape.js
https://github.com/marcodpt/graph
cytoscape cytoscapejs dom element graph
Last synced: 23 days ago
JSON representation
A graph element based on cytoscape.js
- Host: GitHub
- URL: https://github.com/marcodpt/graph
- Owner: marcodpt
- License: mit
- Created: 2021-06-28T19:33:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-11T17:52:17.000Z (over 2 years ago)
- Last Synced: 2024-11-14T01:18:21.388Z (3 months ago)
- Topics: cytoscape, cytoscapejs, dom, element, graph
- Language: JavaScript
- Homepage: https://marcodpt.github.io/h/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fmarcodpt%2Fgraph%2Fsamples.js
- Size: 9.77 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# graph
> A graph element based on [cytoscape.js](https://cytoscape.org/)
[Live demo](https://marcodpt.github.io/h/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fmarcodpt%2Fgraph%2Fsamples.js)
## Usage
```js
import graph from 'https://cdn.jsdelivr.net/gh/marcodpt/graph/index.js'
document.body.appendChild(graph({
data: [
{
id: 'v1',
label: 'John',
color: 'black',
info: 'I am john!'
}, {
id: 'v2',
label: 'Paul',
color: 'black',
info: 'I am Paul!'
}, {
id: 'v3',
label: 'Jimmy',
color: 'black',
info: 'I am Jimmy!'
}, {
id: 'v4',
label: 'David',
color: 'black',
info: 'I am David!'
}, {
id: 'e1',
label: 'John -> Paul',
color: 'blue',
info: 'Cold!',
source: 'v1',
target: 'v2'
}, {
id: 'e2',
label: 'Paul -> Jimmy',
color: 'yellow',
info: 'Warm!',
source: 'v2',
target: 'v3'
}, {
id: 'e3',
label: 'Paul -> David',
color: 'red',
info: 'Very close!',
source: 'v2',
target: 'v4'
}
]
}))
```
## Params
- array `data`: array of objects with `edges` and `vertices` of your graph
- object items represent `vertices` or `edges`:
- string `id`
- string `label`
- string `color`
- Promise string `info`
- string `source`: only for `edges`, the `vertice` source
- string `target`: only for `edges`, the `vertice` target