u/high_Economy

Hello,

HNSW powers most vector databases like Pinecone, Qdrant, and Weaviate, but it's often treated as a black box.

To understand how it actually works, I built VectorLens — an interactive 3D visualizer that shows every step of the HNSW search algorithm.

Live Demo:
https://hnsw-vector-search-visualizer.vercel.app/

GitHub:
https://github.com/ManikBodamwad/HNSW_Vector_Search_Visualizer

A few highlights:

• Built the HNSW engine from scratch in plain JavaScript (no libraries)
• Custom 3D renderer on HTML5 Canvas (no Three.js/WebGL)
• Live visualization of graph traversal and similarity calculations
• Compare HNSW against brute-force vector search

I'd love feedback on the implementation, visualization, or ideas for making it a better learning tool.

Hello,

HNSW powers most vector databases like Pinecone, Qdrant, and Weaviate, but it's often treated as a black box.

To understand how it actually works, I built VectorLens — an interactive 3D visualizer that shows every step of the HNSW search algorithm.

Live Demo:
https://hnsw-vector-search-visualizer.vercel.app/

GitHub:
https://github.com/ManikBodamwad/HNSW_Vector_Search_Visualizer

A few highlights:

• Built the HNSW engine from scratch in plain JavaScript (no libraries)
• Custom 3D renderer on HTML5 Canvas (no Three.js/WebGL)
• Live visualization of graph traversal and similarity calculations
• Compare HNSW against brute-force vector search

I'd love feedback on the implementation, visualization, or ideas for making it a better learning tool.

Hello,

HNSW powers most vector databases like Pinecone, Qdrant, and Weaviate, but it's often treated as a black box.

To understand how it actually works, I built VectorLens — an interactive 3D visualizer that shows every step of the HNSW search algorithm.

Live Demo:
https://hnsw-vector-search-visualizer.vercel.app/

GitHub:
https://github.com/ManikBodamwad/HNSW_Vector_Search_Visualizer

A few highlights:

• Built the HNSW engine from scratch in plain JavaScript (no libraries)
• Custom 3D renderer on HTML5 Canvas (no Three.js/WebGL)
• Live visualization of graph traversal and similarity calculations
• Compare HNSW against brute-force vector search

I'd love feedback on the implementation, visualization, or ideas for making it a better learning tool.

Hello,

HNSW powers most vector databases like Pinecone, Qdrant, and Weaviate, but it's often treated as a black box.

To understand how it actually works, I built VectorLens — an interactive 3D visualizer that shows every step of the HNSW search algorithm.

Live Demo:
https://hnsw-vector-search-visualizer.vercel.app/

GitHub:
https://github.com/ManikBodamwad/HNSW_Vector_Search_Visualizer

A few highlights:

• Built the HNSW engine from scratch in plain JavaScript (no libraries)
• Custom 3D renderer on HTML5 Canvas (no Three.js/WebGL)
• Live visualization of graph traversal and similarity calculations
• Compare HNSW against brute-force vector search

I'd love feedback on the implementation, visualization, or ideas for making it a better learning tool.

Hello,

Almost every RAG pipeline, semantic search engine, and recommendation system relies on Approximate Nearest Neighbor (ANN) search, and HNSW (Hierarchical Navigable Small World) is the gold standard powering databases like Pinecone, Qdrant, and Weaviate.

While building with them, I realized HNSW is often treated as a black box. I wanted to understand the underlying mathematics behind it, so I built VectorLens — a mathematically rigorous, 3D interactive visualizer of the HNSW search algorithm.

Live Demo:
https://hnsw-vector-search-visualizer.vercel.app/

GitHub Repo:
https://github.com/ManikBodamwad/HNSW_Vector_Search_Visualizer

🛠️ The Tech & Engineering Choices:

1. Zero-Dependency HNSW Engine I hand-built the entire HNSW implementation from scratch in plain JavaScript, including sequential node insertion, exponentially decaying layer heights, graph construction, and search traversal.
2. True Priority Queue Traversal The Layer 0 efSearch phase uses a custom binary-heap PriorityQueue implementation (not array sorting), closely following the original Malkov (2016) HNSW paper.
3. Custom 3D Projection (No WebGL / Three.js) Instead of relying on Three.js or WebGL, I implemented a custom perspective projection model with depth-of-field opacity directly on an HTML5 Canvas. The renderer maintains a smooth 60 FPS, even on mobile devices.
4. Live Math Inspector Watch dot products, vector magnitudes, Euclidean distances, and cosine similarity calculations update in real time as the search hops from node to node.
5. Brute Force Comparison You can switch to an O(N) exhaustive search to visually compare how many vector evaluations and graph traversals HNSW avoids.

💡 Why I built this:

I wanted to bridge the gap between "I've heard of vector search" and "I understand exactly how HNSW works." Watching the algorithm descend from Layer 2 → Layer 1 → Layer 0 while seeing every similarity calculation and traversal decision made the algorithm finally click for me.

If you're interested in vector databases, RAG, semantic search, or ANN algorithms, I'd love for you to try it out.

I'd really appreciate any feedback on:

• The HNSW construction logic
• Search traversal correctness
• Canvas rendering performance
• UI/UX improvements
• Features that would make the visualization even more educational

Thanks for checking it out!