P31 P31 Labs
🔺
🔵 PROTOTYPE

OBSERVATORY

Geodesic Data Dome — Interactive Node Visualization

01. What It Does

Each panel on the dome represents a system node. The geodesic dome is the visualization — triangular faces map to your nodes. Click any panel for details, filter by axis or state, or build a custom dataset and load it into the dome (planning, work, personal systems — Buckminster Fuller’s Spaceship Earth as a thinking tool).

02. How It Works

A Three.js icosahedron is subdivided to 320 triangular faces. Each node is placed on a face by direction in ABCD space. Raycasting selects panels. Load any valid JSON (from the generator or your own tooling) via Load .json on the dome view.

03. Key Features

  • Interactive panel selection with detail overlay
  • Axis filtering (A / B / C / D)
  • State filtering (active / deployed / countdown / complete / missing)
  • Deep-black field (no bloom haze)
  • Bring your own data (JSON file + optional generator)
  • Search by node name

Technical Stack

Renderer
Three.js r183 — IcosahedronGeometry, BufferAttribute vertex coloring
Post-Processing
WebGL Bloom via EffectComposer
Architecture
ES Modules, OrbitControls, zero bundler