# note-graph
> a generic visualization tool designed to show the structure of the document space and the relations between each doc
Latest version **0.3.0** (published 2021-10-25) · MIT license · 0 weekly downloads
## Install
```sh
npm install note-graph
pnpm add note-graph
yarn add note-graph
bun add note-graph
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.3.0 |
| Published | 2021-10-25 |
| First published | 2020-12-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 76.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | hikerpig |
| Maintainers | hikerpig |
| Keywords | graph, visualization, foam |
## Links
- npm: https://www.npmjs.com/package/note-graph
- Repository: https://github.com/hikerpig/note-graph
- Homepage: https://github.com/hikerpig/note-graph#readme
- Issues: https://github.com/hikerpig/note-graph/issues
- npm.io page: https://npm.io/package/note-graph
## Dependencies (6)
- [d3](https://npm.io/package/d3.md) ^7.0.1
- [d3-color](https://npm.io/package/d3-color.md) ^3.0.1
- [d3-force](https://npm.io/package/d3-force.md) ^3.0.0
- [d3-scale](https://npm.io/package/d3-scale.md) ^4.0.0
- [force-graph](https://npm.io/package/force-graph.md) ^1.42.2
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^3.0.1
## Alternatives
- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads
## Recent versions
- 0.3.0 (latest) — 2021-10-25
- 0.4.0-beta.0 (beta) — 2021-11-07
- 0.3.0-beta.0 — 2021-09-09
- 0.2.0 — 2021-05-05
- 0.1.5 — 2021-02-16
- 0.1.4 — 2020-12-07
- 0.1.3 — 2020-12-07
- 0.1.2 — 2020-12-06
- 0.1.1 — 2020-12-04
- 0.1.0 — 2020-12-03
- 0.0.3 — 2020-12-02
- 0.0.2 — 2020-12-02
- 0.0.1 — 2020-12-02
## README
# Welcome to note-graph 👋
[](https://www.jsdelivr.com/package/npm/note-graph)
Note Graph is a generic visualization JS lib designed to show the structure of the document space and the relations between each doc.
A handy tool for anyone who is interested in building a graph view for document spaces.
It depends on D3.js and [force-graph](https://github.com/vasturiano/force-graph), written in Typescript and can be used in the browser.
[](https://note-graph.vercel.app/)
## 🚀 Demo and docs
See the [demo](https://note-graph.vercel.app/) on vercel.
## ✨ Features
- Display bidirectional links with an elegant yet informative way.
- Rich interaction
- Hover on the node to see it's link flow.
- Right click on the background to make the graph auto-fits the canvas size.
- Smart zooming, prevent you from getting lost when panning and scrolling.
- 🎨 Highly customizable, pick your favorite colors for all (not yet but closing to it) the visual elements.
## 📦 Usage
### (1) Use in html
Make sure runtime dependencies d3 and force-graph are loaded before constructing `NOTE_GRAPH.NoteGraphView`.
Open [this fiddle](https://jsfiddle.net/hikerpig/3ed215um) to see how it look like.
```html
Note Graph simple example
```
### (2) Use in your project that has a bundler
Install the dependency:
```sh
yarn add note-graph
```
```ts
import { NoteGraphModel, NoteGraphView } from 'note-graph'
// find some demo example code to fiddle
```
## Develop
Install dependendies:
```sh
yarn && yarn bootstrap
```
Start development:
```sh
yarn dev
```
## Author
👤 **hikerpig**
- Twitter: [@hikerpig](https://twitter.com/hikerpig)
## Acknowledgement
- Inspired by [Foam](https://github.com/foambubble/foam).
## Show your support
Give a ⭐️ if this project helped you!
---
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
---
_Source: https://npm.io/package/note-graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._