Northland Power Sources

Under the bonnet

It’s all three.js, and the whole thing - map, data and library - is a single 1.4MB HTML file. Nothing gets fetched from anywhere else; 30 days of five minute readings are gzipped right into the page and unpacked in the browser. Handy when you want to drop it into SharePoint and have it just work :)

The land is built out of H3 hexagons (Uber’s grid for the planet), each one rising and falling with the power being used beneath it.

Making it quick

The first cut ran at a pretty sad 19 frames a second on my iPhone. A few changes got it to 60:

1. Each timeline is drawn once and only the playhead moves.
2. The hexagons are scaled on the GPU.
3. Shadows are redrawn at most every 45ms.
4. Labels repaint a few times a second, not every frame.

Apologies in advance if you’re on older kit - your fans might start to crank up a bit.

The bit I’m really excited about

The labels are flat cards that always face you and stay the same size on screen, however far away you fly. But the supply mix card is the part I’m most stoked with - it’s not stuck to the screen like a normal overlay, it’s an object in the scene. Drag it anywhere on the mat and it docks flat in the bottom left corner, lying on the table with the map. Hit play and the little plane under the compass flies a loop around the stations, opening up their labels as it gets to them.

Next on the list

I think this is where the future of dataviz is heading. When the screen is a headset or a pair of glasses, charts aren’t going to live in rectangles - they’ll sit on the table in front of you, right next to the thing they’re describing. This is me getting my head around how that should feel, on the screens we’ve got now. Lots of learning involved, can’t wait :)

It’s all public data (Electricity Authority, LINZ, Stats NZ and OpenStreetMap), and I built it with Claude as an experiment to learn from.