Building a graph viz πŸ”₯
We need data visualization because a visual summary of information makes it easier to identify patterns and trends; not to mention our brain is more optimized for visual sensory. In combination with a note-taking tool like Athens which provides an easier way to create bi-directional links, this becomes more apparent.


Tweet here. Demo here. Pull request here and here's how the final result looked like
My Data in Athens
I previously worked with d3.js to create a graph viz in my portfolio website. d3 gives an easier way to bring amazing data-driven visualizations to the browser. I ended up using react-force-graph as it covers most of the requirements.

Key features

    Adjust forces to push and pull nodes. These forces help in visually categorizing/grouping data based on its connections.
    Showing n-level connections on hover -- helps with focusing on relations and overlapping concepts.
    In context features such as hiding orphan nodes or daily nodes help in concentrating on connected data.
    Finally local graph with ability to expand view, makes knowledge association more incremental and improves discoverability.
    Last but not least, making it pretty(choosing apt colors for dark/light mode and making interactions sensible)


Last modified 4mo ago
Copy link