Implemented a Graph View on My Blog
I liked Obsidian's graph view, so I implemented it on my own website.
What is the graph view
In the graph view, you can represent relationships between items in a graph like a correlation diagram.
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.
It seems Obsidian implemented it themselves, but since the source code isn’t public, I had no choice but to implement it on my own.
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.
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.
0 people clapped 0 times
Related articles
🍳 XR's Use Might Be as a HUD - Let's Cook with AI
XR's Use Might Be as a HUD - Let's Cook with AI
I borrowed an inmo XR — Android-powered XR glasses — from Ukai, familiar from Mitou Junior, and did a little hackathon. After struggling with what to use it for, I built a cooking assistant to enjoy with an AI. I tried using the XR glasses to cook with AI, so I'll introduce that here.
💻 Let's Develop as a Team on GitHub
Let's Develop as a Team on GitHub
For those of you who have registered a GitHub account but don't use it because you're not a developer, here's a brief guide on how to use it.
🤖 Let's Read Google Sheets via API!
Let's Read Google Sheets via API!
This is a re-publication of an article I wrote on another site last year.
It's super easy. I'll...
🗓️ Thoughts on Life Logging Systems
Thoughts on Life Logging Systems
With the advancement of LLMs, it has become easier to verbalize human behavior and analyze conversations with others. However, I felt that none of it quite fit, so I thought about various aspects from both technical and usability perspectives.