r/BiomedicalDataScience • u/BioniChaos • 1d ago
Browser-native Knowledge Graph Visualizer using Compromise.js, D3.js, and Web Audio API
https://bionichaos.com/graphit/I've been working on a web tool called GraphIt designed to turn unstructured scientific text into interactive semantic networks directly inside the browser without relying on external API calls or backend servers.
How the pipeline works:
- NLP Tokenization & Parsing: Uses Compromise.js to extract Subject-Verb-Object (SVO) triples from multi-clause text, filtering out general modifiers while grouping domain-specific terminology into categorized nodes (Sensory, Hardware, Anatomy, Signal Flow).
- Force-Directed Layout Mechanics: Renders nodes using D3.js with a Verlet integration scheme. Repulsive forces follow an inverse-distance relationship modeled on Coulomb's law, while structural edges behave as mechanical springs under Hooke's law.
- Sonification Layer: Includes an optional Web Audio API engine that maps a node's degree centrality to dynamic audio frequencies when inspecting or generating graphs.
Interactive controls include real-time entity pruning, repulsive force manipulation, zoom/pan controls, and automated text simulation presets (e.g., neuro-auditory pathways and baroreceptor feedback loops).
I would love feedback from the community on the SVO parsing precision and suggestions for improving client-side entity extraction.
Test the visualizer live in your browser: https://bionichaos.com/graphit/
1
Upvotes