# Zettelkasten Visualizer


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](https://cdn.hashnode.com/res/hashnode/image/upload/v1636188503542/-w4xOfvJW.png)


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](https://cdn.hashnode.com/res/hashnode/image/upload/v1636188503621/XeGHMhLWjQ.png)

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.](https://cdn.hashnode.com/res/hashnode/image/upload/v1636188503498/rzS0hf_aB.png)

## Summary
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](https://github.com/joashxu/zetteltools).