Field notes · how it was made
Mapping the lie
ISOGONIC is a live chart of Earth's magnetic declination — the angle by which a compass, at any given place, points away from true north. It exists to make one invisible field legible: the terrestrial magnetic field, drawn as the contours of its own error. The page's single job is to let you feel that north is a local fiction by dragging a needle across it.
The concept
A compass answers to the magnetic pole, not the geographic one, and the offset between them changes with every step you take across the planet. Cartographers call that offset declination, and the lines joining places of equal declination are isogonic lines. The one line where declination falls to zero — where the compass finally tells the truth — is the agonic line. This site renders all of them as a breathing SVG field and hangs a working compass off your cursor so you can read the lie by the degree.
Palette — argued from the field
Navy is the night side of a globe with the lights off — the field is the only thing lit. Blue carries every isogonic contour; gold is reserved, singular, for the agonic thread and the needle's magnetic-north tip — the two places the eye should go. Following the collection's ink/line rule, the bright blue is a line-and-mark token only; body text runs in a derived pale graticule-ink (#C3D3DF) that clears 10.7:1 on navy, so nothing small ever sits in the accent.
Type
Libre Franklin is a modern grotesque with the flat, surveyed confidence of a chart legend — it sets the display headline at a weight heavy enough to feel like a printed title block, and its true italic delivers the one word, lie, that the whole page turns on. IBM Plex Mono handles every number — coordinates, degrees, bearings — because declination is data and tabular figures keep it honest as the readout ticks.
Technique — the field and the needle
Everything is procedural SVG; there are no images and no map tiles. The world is nine simplified coastline polygons and a 30° graticule, both projected equirectangularly (x = λ + 180, y = 90 − φ).
The declination model
The field comes from the coarsest honest approximation of geomagnetism — a tilted geocentric dipole. For such a dipole the horizontal field at any point runs along the great circle toward the geomagnetic pole, so the local declination is exactly the initial compass bearing from that point to the pole:
This drops out two agonic branches for free — the pole's own meridian and its antipode, both visible on the chart as gold verticals — which is the genuine dipole behaviour, not a decoration.
Drawing the contours
Declination is sampled on a 77×45 lattice and the isogonic lines are extracted every 15° with marching squares. Because bearing is discontinuous across the ±180° seam and singular at the poles, any cell whose corner values span more than 170° is skipped — that single guard cleans the branch cut and the pole singularities in one move, leaving only true contours. The agonic line (0°) is pulled the same way and drawn thicker, in gold, with a soft glow.
The compass
The needle is an HTML/SVG rosette floating over the map at fixed pixel size. On pointermove the cursor is unprojected back to latitude/longitude, declination is computed there, and the needle eases toward that angle with a physical settle while a gold arc sweeps from true north to show the gap. The geomagnetic pole then wanders on a slow sine arc, the field is recomputed roughly four times a second, and every contour crawls — so the chart is alive even when no one is touching it.
Iteration log
- Set a deliberate display scale and locked the single gold accent to the agonic line and needle tip only; everything structural stayed in blue and derived ink. Confirmed body ink at 10.7:1 on navy.
- Caught the resting needle reading too subtle after the pole had drifted — the 7s thumbnail showed a near-vertical needle. Moved the parked cursor from the mid-Atlantic to western Canada (~17° E), a deflection that stays large across the whole drift cycle, so the "lie" reads instantly at rest.
- Verified the branch-cut guard actually removed the seam artefacts rather than merely hiding them.
- Made isogonic opacity encode the size of the lie — contours far from the agonic line (bigger declination) draw brighter, so the eye reads magnitude, not just position.
- Added the agonic truth moment: cross the zero line and the rosette hub and ring flare gold while the readout says "here the compass tells the truth." A second-read reward that dramatises the one honest seam.
- Gave the parked needle a faint sympathetic settle — a real compass never sits perfectly still — which also guarantees the passive liveness diff.
- 375px verified by real screenshot and scrollWidth == 375; the wide equirectangular SVG is contained by its own viewBox, no document overflow.
- Reduced-motion renders a fully settled frame — all contours, both agonic branches, the deflected needle — never a blank; a single interactive read stays available. Confirmed via emulated media query.
- rAF pauses on document.hidden, resize re-places the rosette, focus-visible rings throughout, zero console errors across desktop, mobile and reduced-motion runs. Trimmed one ornament — the south-pole label stayed only because it earns the second agonic branch.