59 towers, to scale

An interactive skyline of every tall building BG&E has engineered, drawn to scale from one spreadsheet, for bgeeng.com and the UK site.

Client: BG&E
Type: Interactive
Role: Design, data model, build
Year: 2026
Kit: Figma scripting, vanilla JS, JSON, GA4

The live widget on the tall-buildings sector page.

The brief

The brochure had a skyline timeline that someone redrew by hand in a legacy Photoshop file every time a tower was added. The web had nothing.

The ask was simple: make the brochure version faster to update. The better answer was a web version people could actually explore.

What made it hard

Fifty-nine buildings at true relative height is a layout problem before it is a design problem: the tallest tower sets the scale and the shortest becomes a sliver.

It had to live inside an existing WordPress theme with no new platform, and port to a second site on a different stack without a rewrite.

One spreadsheet, two outputs

It started as a Figma script that generated the static brochure timeline from the project spreadsheet. The same data then fed the web version, so the brochure and the site can never disagree.

Planning notes for the skyline data model — Working out the to-scale rule and what each tower needs to carry.

The to-scale rule

Heights are real, widths are not. A minimum footprint keeps the short towers readable, and the hover state carries the facts the silhouette cannot.

Hover state showing a tower’s name, height and city — Hover: name, height, city, and a way into the project page.

Built to move

Plain JS and a JSON payload inside the Divi child theme, with GA4 events from day one. The UK site took the same component three weeks later on Astro.

The skyline component source in the editor — No framework, so it could go anywhere.

What happened

towers, drawn to scale from one spreadsheet: towers, drawn to scale from one spreadsheet
of visitors to the page engaged with it (May–Jun 2026): %of visitors to the page engaged with it (May–Jun 2026)
opened a project from the skyline: %opened a project from the skyline

Live on bgeeng.com and bgeeng.uk. The brochure timeline now takes minutes to regenerate instead of an afternoon in Photoshop.

Design and build: Eddy Huang
Data: BG&E tall-buildings team
Workflow: AI coding agents as the build environment; data model, rule and QA mine

Off Script

Six questions to nine engineers, filmed in Melbourne, delivered through a web player that knows which answer you watched.