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.
Showcase
Tweet here. Demo here. Pull request here and here's how the final result looked like
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)
Links
Last updated
