Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/graphcentral/graph
Performant graph visualization on the web with WebGL + Webworkers + IndexedDB / https://graphcentral.github.io/graph
https://github.com/graphcentral/graph
force-directed-graph graph knowledge-graph notion obsidian-md roamresearch typescript webgl webworker
Last synced: 3 months ago
JSON representation
Performant graph visualization on the web with WebGL + Webworkers + IndexedDB / https://graphcentral.github.io/graph
- Host: GitHub
- URL: https://github.com/graphcentral/graph
- Owner: graphcentral
- License: mit
- Created: 2022-06-09T16:11:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-15T10:08:31.000Z (over 2 years ago)
- Last Synced: 2024-10-13T22:51:54.365Z (3 months ago)
- Topics: force-directed-graph, graph, knowledge-graph, notion, obsidian-md, roamresearch, typescript, webgl, webworker
- Language: TypeScript
- Homepage: https://graphcentral.github.io/graph
- Size: 29.5 MB
- Stars: 33
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `@graphcentral/graph`
```bash
npm i --save @graphcentral/graph
```![logo](./logo.png)
## Demo
👉 "5K nodes + 5K links": https://graphcentral.github.io/graph?graph_data=5000
👉 "50K nodes + 50K links": https://graphcentral.github.io/graph?graph_data=big
👉 "100K nodes + 100K links" (apprent degradation in performance expected): https://graphcentral.github.io/graph?graph_data=huge
👉 "Notion official help docs" (runs force layout algorithm on the browser): https://graphcentral.github.io/graph?graph_data=notion_docs
## Visualizing Notion pages
You can visualize Notion pages on force layout graph using this library and `@graphcentral/notion` together.. Check out [@graphcentral/notion](https://github.com/graphcentral/notion).
## What you can get
Example of a knowledge graph of Notion Help docs:
![example0.png](./example0.png)## How to
Simplest example:
```ts
import { KnowledgeGraph } "@graphcentral/graph"const canvasElement = document.createElement(`canvas`)
document.body.appendChild(canvasElement)const { nodes, links } = await fetch(
`https://raw.githubusercontent.com/9oelM/datastore/main/notion-help-docs.json`
).then((resp) => resp.json())if (!nodes || !links) {
// error
return
}const knowledgeGraph = new KnowledgeGraph({
nodes: nodes,
links: links,
canvasElement,
options: {
optimization: {
useParticleContainer: false,
useShadowContainer: false,
showEdgesOnCloseZoomOnly: true,
useMouseHoverEffect: true,
maxTargetFPS: 60,
},
graph: {
runForceLayout: true,
customFont: {
url: `https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap`,
config: {
fill: 0xffffff,
fontFamily: `Do Hyeon`,
},
},
},
},
})
knowledgeGraph.createNetworkGraph()
```For more complicated example using `@graphcentral/graph`, visit `packages/example`. More docs, and interactive demo to come (contributions are most welcome).