Implemented a Graph View on My Blog

What is the graph view

The editor I use to write my blog, Obsidian, has a similar feature. Obsidian Publish, which publishes Obsidian notes to the web, also includes this graph view and says it uses the same rendering engine as the graph view.

I don't have that many posts, so I didn't need to worry much about performance. I used a package called React-Force-Graph that bundles the d3.js library mentioned in the Reddit post above, and tweaked the force simulation and other settings.

GitHub - vasturiano/react-force-graph: React component for 2D, 3D, VR and AR force directed graphs

React component for 2D, 3D, VR and AR force directed graphs - vasturiano/react-force-graph

GitHub

There is a similar library called vis.js, but I chose d3.js because it allows more complex interactions (vis.js is easier to get started with). Since many users browse on mobile, I made all features usable without hover interactions.

As the package name suggests, the graph view runs in React. This site is mostly static and uses Astro, so everything except the graph-view component is prebuilt.

At build time, I generate a JSON file that describes all posts and their relationships, and load it when the page loads.

If the number of pages grows a lot, this might become problematic, so I'll use this approach for a while and consider another method if it doesn't work out.