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
💻 Let's Try Team Development on GitHub
Let's Try Team Development on GitHub
For those of you who have registered an account on GitHub but haven't used it because you're not a developer, I've written a brief article explaining 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...
🍳 XR's Use May Be Like a HUD — Let's Cook with AI
XR's Use May Be Like a HUD — Let's Cook with AI
I borrowed an inmo XR, an Android-based XR headset, from Ukai (known from Mitou Junior) and did a small hackathon. After struggling to find a use, I built an AI-powered cooking assistant to enjoy cooking with an AI. Here I introduce my attempt to cook with AI using the XR glasses.
🗓️ 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.