Climate helix

One day, scrolling through X, I came across an animated chart: a colored line spinning outward, faster and redder with every turn. It turned out to be a climate spiral, a way of showing how global temperatures have changed since the late nineteenth century.

The research

The climate spiral was introduced in 2016 by climate scientist Ed Hawkins from the University of Reading. A version of it even appeared at the opening ceremony of the Rio 2016 Olympics. In 2022, NASA's Scientific Visualization Studio released its own spiral, covering 1880–2021, and that is the version I used as a reference.

The data behind it is GISTEMP v4, NASA's record of global surface temperature. It combines readings from weather stations on land with sea surface temperatures measured by ships and buoys. The record starts in 1880, because earlier observations don't cover enough of the globe.

The values aren't absolute temperatures but monthly anomalies: how much warmer or cooler each month was than the average for that same month in 1951–1980. So +1 °C means one degree above that baseline. In the spiral, each month is a point on a circle, and the further it is from the center, the warmer that month was.

Why I built it

I've always liked charts like this, where a pile of numbers turns into a shape you understand at a glance. I also like Three.js and had wanted a reason to play with it. The spiral already had the idea; what I wanted to add was a way to explore it yourself instead of watching a fixed animation.

So I added a third dimension. Each turn is still one year, but the years now stack upward, so the flat spiral becomes a helix. From above it looks like the original. From the side you can see the whole timeline at once.

Hawkins had also made 3D and rotating versions, so the idea itself isn't new. Mine is just one you can turn around in a browser.

Explore

Choose a year, drag to rotate, and scroll or pinch to zoom. Right-drag or move two fingers to pan. Use View rotation to look from different monthly directions, Reset to return to the top-down view, or the button in the top-right corner to go fullscreen.

The yellow guides mark the 0 °C and +1 °C distances from the center. Missing months are left as gaps.

How it works

The widget is a small standalone project written in TypeScript, with Three.js for rendering and Vite for the build. There is no UI framework.

• Each month becomes a point: the angle is the month, the distance from the center is the anomaly, and the height is time.
• The points are joined by a smooth curve, colored from blue for cooler months through white to red for warmer ones. The curve is only a visual connection, not extra data between months.
• The lines are drawn with Three.js's fat-line addon so they keep a steady width, and OrbitControls handle rotating, panning and zooming.
• The scene only redraws when something changes, so an idle page doesn't keep the GPU busy.
• Everything, including the data, ships as one script, so the page makes no extra requests. It needs WebGL 2; without it, the widget shows a short message instead.