Skip to content
Iñigo EcheverríaGeologist · Geospatial developer
All work

Stereobox

An interactive stereonet for learning structural geology, linking compass readings, the stereonet and the plane in 3D.

Role
Designer and developer
Period
2018
Services
  • Scientific computing
  • Web maps
Links
Open Stereobox
Stereobox in a dark theme with three panels. Left, readings in three notations (030/45, N30E 45SE, 120/45) above a compass and clinometer. Centre, a stereonet with the plane’s great circle and coloured points for strike, dip and pole. Right, a 3D view of the plane cutting a hemisphere.
One plane in every view. The same colours mark strike, dip direction and dip in the readings, the compass, the stereonet and the 3D view.

Geologists measure planes in the field with a compass, record them in one of three notations and plot them on a stereonet. Students often learn the three separately. Stereobox puts them side by side and keeps them in sync: move the compass needle, drag the pole on the stereonet or rotate the plane in 3D, and every other view follows, with animated transitions. I designed and built it by hand, without AI coding assistance.

Four views of one plane

  • Readings in three notations. Azimuth, quadrant and dip-direction notations convert both ways as you type, with validation that stops invalid input before it reaches a drawing.
  • A working compass and clinometer. Drawn in SVG, needles, ticks and all. Click anywhere on the dial, or drag a needle, to set the reading.
  • An interactive stereonet. Every key point of the plane is a handle: dragging the pole changes strike and dip together, the dip point changes only dip, the strike ends only direction.
  • A 3D view. The plane cuts the lower hemisphere in Three.js. Rotate it freely, and change its colour, opacity and clipping.

The same colours mark strike, dip direction and dip in all four.

How it works

  • Spherical geometry from scratch. Conversions between spherical and Cartesian coordinates, rotations and great circles are a small custom module, not a GIS library.
  • D3 as a coordinate system. The stereonet uses D3’s azimuthal equal-area projection purely as maths: drag positions are inverse-projected back to orientations. Every visible element is a React SVG component.
  • React and Three.js, decoupled. React owns the page state; Three.js owns the 3D canvas and its render loop. A small event bus connects them without shared mutable state.
  • Its own animation. Transitions between readings are generated frame by frame, with no animation library.
  • English and Spanish, including the help text for each view.

Reception

Shared on r/geology and a geoscience Discord server, where it was pinned in several channels and became the most-liked pinned post. At least one user said they would use it in their classes.