note-graph

a generic visualization tool designed to show the structure of the document space and the relations between each doc

Usage no npm install needed!

<script type="module">
  import noteGraph from 'https://cdn.skypack.dev/note-graph';
</script>

README

Welcome to note-graph 👋

License: MIT CDN version

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.

note-graph.png

🚀 Demo and docs

See the demo 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 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.40.3/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>

(2) Use in your project that has a bundler

Install the dependency:

yarn add note-graph
import { NoteGraphModel, NoteGraphView } from 'note-graph'

// find some demo example code to fiddle

Develop

Install dependendies:

yarn && yarn bootstrap

Start development:

yarn dev

Author

👤 hikerpig

Acknowledgement

Show your support

Give a ⭐️ if this project helped you!


This README was generated with ❤️ by readme-md-generator