Zettelkasten Visualizer

Joash Xu
·Jun 16, 2020·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

I have been using a note-taking system called Zettelkasten. For those of you who are not familiar with Zettelkasten, it is a note-taking method popularized by German sociologist Niklas Luhmann. In German Zettle means, index card and Kasten mean slip box.

One of the underlying architecture of this note-taking system is linking or explicitly making associations between notes. And as my notes grow, I want to visualize how my notes interconnect.

I create a visualization using Python and D3. Python for file processing (reading files, parsing links, etc.) and D3 for doing the actual visualization (a disjoint force-directed graph).

The Visualization

The visualization shows how my notes interconnect. While some notes that have connections, there are also a lot of orphaned notes. I will review these orphaned notes in the coming days.

Overall connection between notes

The visualization supports simple interactivity through mouseover. When we hover the mouse cursor over a note, it will focus on that note and its child and show the note's title.

Mouse over a note

I can also display the same visualization but highlight a specific part of the graph, which is pretty useful when I want to focus on that part.

Visualization with highlighted notes.


I made this visualization to help me shed more light on what kind of information I put in my "slip box" and how they relate to each other. And for that, it has been an eye-opener. For a start, I have a lot of orphaned notes that I need to review.

You can find my implementation on my Github.

Share this