Graph

Every page ends with an interactive graph of the whole brain – the one below this text is it. It's a D3 force-directed graph rendered by the <page-graph> custom element (js/graph-component.js).

How it works

  • Each note is a node, identified by its slug. Every internal link (see Linking) is an edge.
  • The generator writes the whole thing to /graph-data.json at build time; the widget fetches it on page load.
  • The node for the page you're on is highlighted, along with its direct connections.
  • Click any node to jump to that note. Drag nodes around if that's your idea of fun.

Embedding it yourself

The page template already includes the graph on every note, but it's an ordinary custom element you can place anywhere HTML works (in org files, wrap it in an export block – see Widgets):

<page-graph
  current-page="/notes/about/"
  data-src="/graph-data.json"
  width="800"
  height="500">
</page-graph>

Backlinks