HyperSpace

Inspiration

Big knowledge collections are hard to explore. Lists hide how ideas connect, and mind maps turn into hairballs once they grow past a few hundred nodes. We wanted exploring thousands of connected concepts to feel like flying through a space instead of scrolling a page.

Hyperbolic geometry fits this well. In hyperbolic space the amount of room grows exponentially with distance from the center, just as a tree's number of nodes grows with depth. So the whole tree fits in one view: whatever you focus on is large and readable, and everything else stays visible but compressed toward the edge.

What it does

Hyperspace turns 2,475 Wikipedia topics about artificial intelligence into a universe you explore on a Poincaré disk.

Click to recenter. Click any topic and the whole map transforms around it, so it glides to the center while its neighbors spread out and distant branches shrink toward the rim. You never lose context.
Search by meaning. Type a topic or a question. TiDB combines full-text and vector search, and the map flies to the best match, highlighting related topics along the way.
Grow new branches. Hit Expand on any topic. Hyperspace pulls related pages from Wikipedia, Gemini picks and cleans up the best ones, and they grow out of the map as new branches. Results are cached so repeat expansions are instant.
Source-backed. Every topic shows its Wikipedia summary and a link to the article.
Euclid toggle. Flip to a flat radial tree of the same data, and you can see why the geometry matters: by depth 3 the flat rim runs out of room.
Presentation and demo modes. Press P for a clean full-screen view. Demo mode serves cached search and expand results, so the core experience keeps working without network access.

How we built it

Data pipeline (Node.js)

We crawl Wikipedia's category graph breadth-first from Category:Artificial intelligence, grafting in key branches (Machine learning, Computer vision, Natural language processing, Robotics). Breadth-first order means each page keeps its shallowest parent, which also breaks the cycles in Wikipedia's category graph.
We filter out maintenance categories, lists, biographies, companies, media and news events, fold articles into their same-named categories, and use article length as a stand-in for importance when pruning.
The result is a clean tree: 249 categories and 2,226 articles, up to 4 levels deep, each with a short intro and a source link.

TiDB Cloud

One nodes table holds each topic with its root-to-node path as JSON, a full-text index on title and summary, and a VECTOR(1024) column with a cosine vector index.
Embeddings are computed inside TiDB with its built-in EMBED_TEXT model. Each topic is embedded with its breadcrumb (e.g. Attention (Machine learning > Deep learning)) so short or ambiguous titles keep their meaning.
Search runs a hybrid query that merges full-text hits with vector-similarity hits, with a boost for exact title matches.
An expansions table caches every Expand result, keyed by topic and dataset version.

Gemini

Expand collects candidate pages from Wikipedia (category members or search results), then asks Gemini to choose the 5–8 best children, write 1–2 sentence summaries, and return strict JSON that we validate before it touches the map.

Frontend (Next.js, React, TypeScript, Tailwind)

The disk is rendered with d3-hypertree. Recentering uses a Möbius transformation, the distance-preserving motions of the disk:

$$T_a(z) = \frac{z - a}{1 - \bar{a}\,z}$$

This sends the clicked point $a$ to the center, and edges are drawn as geodesic arcs.

We wrote our own label picker (scored by subtree weight and closeness to the focus, with overlap rejection), because the library's built-in culling only ever labeled the root.
To stay fast, we render a pruned set of about 470 nodes and graft new nodes into the live tree as you navigate or expand, instead of rebuilding it.

Challenges we ran into

Wikipedia is a graph, not a tree. Categories have cycles, duplicates and many people, companies and films filed under "AI". Turning that into a clean hierarchy took many rounds of filters.
Performance. Rebuilding the hyperbolic layout on every click was too slow, so we wrote an in-place graft that adds nodes to the live tree without starting over.
Labels. The library's label culling showed only one label, so we replaced it with our own collision-aware picker.
Tooling surprises. One of the visualization library's npm dependencies shipped without its build output, so we vendored a working bundle.
Balancing hybrid search. Full-text and vector scores live on very different scales, and merging them so keyword hits don't drown out meaning took careful tuning.

Accomplishments that we're proud of

A smooth, genuinely non-Euclidean interface where clicking any distant topic glides it to the center.
The side-by-side Euclid toggle, which shows in one click why hyperbolic space is the right fit for big hierarchies.
A real data pipeline: thousands of curated, source-linked Wikipedia topics, embedded and searchable in TiDB.
A demo that keeps working with cached data when the Wi-Fi doesn't.

What we learned

Hyperbolic geometry in practice: Poincaré disk coordinates, Möbius transformations and geodesics.
How to run full-text and vector search side by side in one database, and why combining their scores is harder than it looks.
How to get dependable, structured JSON from an LLM and treat it as a helper inside a pipeline rather than a black box.
How much cleanup real-world data needs before it looks simple.

What's next for Hyperspace

Smarter hybrid ranking (e.g. reciprocal rank fusion) and search that explains why a result matched.
Multi-level Expand, so newly grown branches can keep growing.
More universes beyond AI: any Wikipedia category, or your own notes and documents.
Collaborative exploration: shared trails and bookmarks through the disk.