Cosmos

Main View
Node Panel
Guided Journey
Zoomed-in view of nodes
Search Feature

Inspiration

Space data is everywhere — NASA's Exoplanet Archive alone catalogs over 5,500 confirmed worlds beyond our solar system. But browsing a spreadsheet of planets doesn't make you feel anything. We kept asking: what if you could see the entire known universe of exoplanets and the missions that found them, all at once, as a living map? And what if that map could talk back?

We were also inspired by the way human knowledge actually works — not as lists, but as connections. A mission discovers a planet. That planet shares characteristics with another. That similarity points to a detection method. Knowledge is a graph, not a table. Cosmos is our attempt to make that visible.

What it does

Cosmos is an interactive knowledge graph of NASA exoplanet and mission data. Every node on the map is either a confirmed exoplanet or a NASA discovery mission — color-coded, force-directed, and spatially arranged so that relationships between worlds and the telescopes that found them become immediately visible.

Click any node and a detail panel surfaces its key stats: host star, discovery year, orbital period, mass, temperature, distance in light years. At the same time, Stella — an AI guide powered by Claude — automatically narrates what makes that world remarkable, placing it in context within the broader dataset.

You can also ask Stella anything in free text: "Which planet here is most like Earth?", "What did the Kepler mission actually discover?", "Show me something surprising." She maintains full conversation history, so follow-up questions work naturally.

A guided tour walks first-time visitors through four landmark stops in the map — from the first confirmed exoplanet to JWST's most recent atmospheric detections — making the data accessible to someone with no astronomy background.

How we built it

Frontend: React + Vite, with react-force-graph-2d handling the graph physics and canvas rendering. We wrote custom canvas draw functions for nodes, links, a procedural star field, and nebula clouds — all rendered directly in WebGL-accelerated 2D canvas for smooth 60fps performance even with 30+ nodes and hundreds of edges.

Graph layout: We implemented a custom spiral galaxy layout using D3 force simulation. Nodes are initialized on an Archimedean spiral:

$$r = a \cdot \theta$$

where $r$ is the radial distance and $\theta$ is the angular position, with mission nodes anchored as gravitational centers that exoplanet nodes cluster around. A custom forceSpiralShape function applies radial and tangential nudges each simulation tick to maintain the galaxy aesthetic while still letting physics resolve collisions naturally.

AI layer: Stella runs on Claude via the Anthropic API. Every node click fires a context-rich prompt containing the node's full data object, and the panel maintains a conversationRef array that accumulates the full message history — so Stella has memory across the entire session. Quick-action chips are dynamically generated based on whether a node is selected, keeping suggestions always relevant.

Data: Sourced from NASA's Exoplanet Archive and mission records, curated into a graph schema with typed nodes (exoplanet | mission) and edges representing discovery relationships.

Challenges we ran into

Graph aesthetics vs. physics. Force-directed graphs default to a blob. Getting the spiral galaxy shape to hold while still allowing the physics engine to resolve overlaps and render cleanly required writing a custom D3 force function that runs in parallel with the built-in charge, link, and collision forces — and carefully tuning $\alpha$ decay and velocity decay so the layout converges without oscillating.

Detail panel positioning. The floating detail panel needs to appear next to whichever node you clicked, in graph-space coordinates, then stay anchored as you pan and zoom. Converting between graph coordinates and screen coordinates while clamping to viewport bounds — and polling for position updates during animation — was more subtle than expected.

Stella's context window. Sending the full node data object on every click risks ballooning the conversation history. We had to design the prompt architecture carefully so Stella gets enough context to be specific without the conversation becoming expensive or slow over a long session.

Making space accessible. Exoplanet data is full of jargon — equilibrium temperature in Kelvin, semi-major axis in AU, surface gravity in $g$. Tuning Stella's system prompt so she translates this fluently for a general audience without losing scientific accuracy took significant iteration.

Accomplishments that we're proud of

The moment the spiral galaxy renders and you realize every dot is a real planet — that feeling was worth building for. We're proud that the app makes 5,000 years of future travel feel tangible: clicking Proxima Centauri b and reading "4.2 light years away — the closest known exoplanet to Earth" hits differently when it's surrounded by 29 other worlds on a map you can navigate.

We're also proud of Stella. A guide that automatically contextualizes whatever you click, maintains memory, and answers follow-ups naturally — without any backend — felt like exactly the right use of AI: additive, not gimmicky.

What we learned

That data visualization is 20% data and 80% framing. The NASA Exoplanet Archive has been public for years. The insight isn't the data — it's the decision to treat it as a graph, to give it a spiral shape that echoes the galaxies it describes, and to put a conversational guide next to it.

We also learned that custom canvas rendering is genuinely powerful. Stepping outside of declarative UI — writing directly to a 2D canvas, controlling every pixel of how a node glows or a link fades — gives you an expressive range that no charting library can match.

What's next for Cosmos

Live NASA API integration — pulling fresh exoplanet discoveries as they're confirmed, so the graph grows in real time
3D mode — lifting the graph into Three.js space, with orbital planes and true stellar distances represented spatially
Stella voice — text-to-speech narration for the guided tour, making Cosmos usable as an educational kiosk
Habitability scoring — a visual layer that colors nodes by estimated habitability index, derived from temperature, radius, and stellar flux:

$$HI = \frac{T_{eq}}{T_{\oplus}} \cdot \left(1 - \frac{|R_p - R_{\oplus}|}{R_{\oplus}}\right)$$