Explore page: a visual browsing UI for the garden

The idea

What if visitors could explore the garden not just through lists and links, but by walking through it? A dedicated /explore page that makes the garden’s structure visible and browsable, using the embeddings and key phrases we’ve already computed.

Three modes of exploration, all sharing the same spatial map:

1. The garden map

A 2D map where every item is positioned by semantic similarity. Items that are about related topics cluster together. Items on unrelated topics sit far apart. You see the shape of the garden at a glance: where the conversation design cluster is, where the AI explorations live, where the book reviews gather.

Visual language:

Items rendered as Rough.js circles (hand-drawn, matching the garden’s sketchy icon style and feTurbulence wobble filter)
Size reflects maturity: seeds are small, solid articles are larger
Color follows the existing collection palette (WCAG AA compliant: #7A5A48 for articles, #4A7A50 for field notes, #A07030 for seeds, etc.)
Hover shows title + description in a tooltip
Click navigates to the item
Pan and zoom via mouse/touch
Cluster labels auto-generated from shared key phrases (“conversation design”, “digital gardens”, “embedding models”)

Data pipeline: Project the 1024-dim bge-m3 embeddings to 2D using UMAP (via umap-js, client-side). Pre-compute at build time and ship as a static JSON file with x,y coordinates per item.

2. Wander

A serendipity mode. Not pure randomness: constrained randomness that surfaces undervisited or sparsely connected items.

How it works:

A “Wander” button picks a random item, weighted toward items with fewer inbound links
The map smoothly pans to that item’s location
A sketchy circle highlights the item and its 3-4 nearest neighbors on the map
A small card appears: “While you’re here…” with the item title, description, and its neighbors as suggestions

Visual language:

The highlighted area could look like a hand-drawn magnifying glass or a garden bed outline
Neighbors connected by faint sketchy lines (Rough.js paths)

Design principle: Serendipity requires both unexpectedness and value (IJDesign research). Weighting toward under-linked items provides unexpectedness. Showing neighbors provides value: you don’t just land on a random page, you land in a neighborhood.

3. Garden paths (trails)

Curated or auto-generated sequences through the garden. A path connects items in an order that tells a story or follows a theme.

Types of paths:

Auto-generated: Shortest semantic path between two items. “How do you get from ‘Crew Resource Management’ to ‘Digital Gardens vs Blogs’?” The algorithm finds intermediate items that bridge the semantic gap.
Curated: Hand-picked sequences for specific themes. “The AI conversation design journey” or “How this garden was built.”

Visual language:

Paths drawn as Rough.js curved lines across the map, like hand-drawn garden paths
Active path highlighted in hot pink (#D6006C), other paths in muted earthy tones
Current position on the path shown as a marker
Path list in a sidebar or overlay: click a path to activate it

Inspiration: Vannevar Bush’s Memex trails (1945) proposed paths through linked knowledge that strengthen with use and fade without it. Mozilla’s experimental Trails browser replaced tabs with horizontal reading paths.

Visual design principles

The explore page should feel like looking at a hand-drawn map of an actual garden. Not a data visualization. Not a dashboard.

Rough.js for all shapes and lines (organic, imperfect, warm)
Earthy tones from the existing collection palette, not bright data-viz colors
No grid, no axes. This is a landscape, not a chart
Labels use Lora (the garden’s heading font) for a handwritten quality
Dark mode support via the existing token palette
The roughViz philosophy: “Use these charts where the goal is to show intent or generality, not absolute precision”

Technical approach

Component	Library	Notes
2D projection	umap-js (Google PAIR)	Pre-compute at build time, ship as static JSON
Rendering	D3.js + Rough.js	157 items is well within SVG capacity
Pan/zoom	d3-zoom	Standard, well-tested
Hand-drawn shapes	Rough.js (<9KB)	Matches existing garden aesthetic
Trails	D3 path generators + Rough.js	Curved lines between waypoints
Hosting	Astro page (`/explore`)	Static, ships with the site

The page loads a pre-computed JSON with item metadata + 2D coordinates. No runtime ML, no server needed.

Status

Answered questions

Full-screen layout with header, not embedded in a container
Overlapping circles handled by hover-to-front + tooltip offset
Trails stored as static data in explore-data.json (not a content type)
Explore link lives in the main navigation

References

Nomic Atlas: embedding-based 2D maps with auto-labels
PixPlot (Yale DHLab): UMAP-positioned museum collections
Heritage Connector: thematic browsing for museum collections
Generous Interfaces: designing for “just looking around”
Vannevar Bush, “As We May Think” (1945): trails through linked knowledge
umap-js: client-side UMAP in JavaScript