note-graph
Advanced tools
a generic visualization tool designed to show the structure of the document space and the relations between each doc
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, written in Typescript and can be used in the browser.
Inspired by Foam.
See the demo on vercel.
Make sure runtime dependencies d3 and force-graph are loaded before constructing NOTE_GRAPH.NoteGraphView.
Open this fiddle to see how it look like.
<html>
<head>
<title>Note Graph simple example</title>
<script src="https://cdn.jsdelivr.net/npm/d3@6.2.0/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/force-graph@1.35.1/dist/force-graph.js"></script>
<script src="https://cdn.jsdelivr.net/npm/note-graph@latest/dist/note-graph.umd.js"></script>
</head>
<body>
<div id="note-graph-container"></div>
<script>
async function initGraphView() {
const notes = await (
await fetch(
'https://note-graph.vercel.app/data/concept-data.json'
)
).json()
const graphModel = new NOTE_GRAPH.NoteGraphModel(notes)
const graphView = new NOTE_GRAPH.NoteGraphView({
container: document.getElementById('note-graph-container'),
graphModel,
enableNodeDrag: true,
})
}
window.onload = function () {
initGraphView()
}
</script>
</body>
</html>
Install the dependency:
yarn add note-graph
import { NoteGraphModel, NoteGraphView } from 'note-graph'
// find some demo example code to fiddle
Install dependendies:
yarn && yarn bootstrap
Start development:
yarn dev
👤 hikerpig
Give a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator
FAQs
a generic visualization tool designed to show the structure of the document space and the relations between each doc
The npm package note-graph receives a total of 61 weekly downloads. As such, note-graph popularity was classified as not popular.
We found that note-graph demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.