State of the Fossil-Free Internet 2026

Green Web Foundation

Five data visualizations for the Green Web Foundation's first annual briefing on dirty data centres, AI energy demand, and the race to clean up the internet.

Challenge

The Green Web Foundation's first annual briefing had a clear editorial argument: the world's largest tech companies are falling further behind their own net-zero targets, driven by an AI-fuelled explosion in data centre construction. The design challenge was translating that argument into visuals that could hold up in a long-read report, survive as standalone press assets, and work in a keynote slide — all at the same time, on a fixed budget. Earlier Green Web reports relied on static charts and text. This edition needed to move from static to interactive, from one-off to downloadable, and from internal to press-ready.

Solution

Five data visualizations — interactive and static — each with downloadable PNG exports: a 24-hour interactive globe showing 950,718 website checks (D3.js and GeoJSON), a global data centre map plotting 10,852 facilities across 174 countries (Leaflet), a footprint comparison map overlaying Meta's Hyperion campus on familiar landmarks (Leaflet), emissions deviation small multiples for Google, Amazon, and Microsoft, and a cloud provider transparency scorecard. All production code was built for direct embedding in the report's WordPress site.

My Contribution

My role was data visualizer: concept, design, and production code for all five interactive and static visualizations. Before any of those existed, I ran an exploratory data analysis phase in Observable Plot.js — mapping distributions, testing chart types, identifying where the signal was strong enough to carry a visual argument. That phase is why the final set is five visualizations and not eight: some candidates didn't hold up once we looked at the actual numbers. The production builds were embedded directly in the report's WordPress site, with a downloadable PNG for every chart. Solana Larsen led the report narrative; Alice Apsey held visual identity, layout, and the PDF version; Nick Lewis built the site.

View Project

Client
Green Web Foundation
My Role
Data Visualisation
Time
2025–2026
Collaboration
Katrin Fritsch (project management), Solana Larsen (lead editor), Audrey Hingle (communications), Alice Apsey (visual identity, report layout, PDF), Nick Lewis (web development)

Results

Report homepage

The report's landing screen — hero, navigation, and the interactive globe already in view below the fold. The report is structured as a scrollable long-read with five numbered sections; the globe is the first data point a reader encounters.

Global data centre map

10,852 publicly known large data centres plotted across 174 countries, paired with a ranked bar chart of the top countries by count. The USA alone accounts for 4,582 — more than the next twelve countries combined. The chart title asks the question the data answers: how many more do we need?

Meta Hyperion footprint comparison

An interactive map overlaying the footprint of Meta's Hyperion data centre campus over Central Park, the Pyramids of Giza, and the Maracanã Stadium. The question in the header — 'How would you feel if this was in your neighbourhood?' — does what the map can't do alone: make the scale personal.

Tech company emissions deviation charts

Small multiples showing Google, Amazon, and Microsoft's unadjusted emissions, market-adjusted emissions, and stated net-zero targets from 2020 to 2030. All three companies are moving in the wrong direction. The gap between the target line and the actual trend is the argument — restrained, deliberately uncomfortable, nothing decorated.

Cloud provider transparency scorecard

A matrix rating Google Cloud, Amazon Web Services, and Microsoft Azure across four disclosure criteria. Amazon and Microsoft score 0% on every criterion. The only green cell in the entire table is Google's hourly carbon-free energy reporting at 90.24%. The emptiness of the other cells is the argument.

Static Assets

Green Web Check globe — press export

The standalone downloadable version of the interactive globe — same visualization, stripped of UI chrome, composed with report branding, the 58.9% / 41.1% legend, and the source line. Ready to drop into a press kit or slide deck without further editing.

Emissions deviation charts — press export

The press export of the emissions small multiples — the same three-panel chart, now with report branding and source attribution composed in, detached from the interactive report context and ready for independent use.

Process

The process started not with design but with data. Working in Observable Plot.js, I mapped the Green Web Check dataset from multiple angles — distributions by geography, traffic patterns over 24 hours, country and city breakdowns. That exploration was a shared working process with the team: it surfaced which findings were actually surprising and which were less interesting than expected. The final set of five visualizations is a direct result of that phase. Without it, we would have been designing against assumptions.
Once the data exploration defined what to build, the work moved to Figma for mockups and then directly to production code. Each visualization had two targets from the start: an interactive embed for the web report and a downloadable PNG for press and slide use. That dual-output requirement shaped every design decision — labelling, annotation density, download affordance — and was resolved before a single line of production code was written.
The downloadable press asset for the Green Web Check globe — the same visualization as it ships to media, with report branding, the 58.9% / 41.1% legend, and the source line intact. Every chart had a version like this: self-contained, ready to drop into a slide deck or press kit without further editing.

Learnings

Using AI to build a report about AI

This project was one of the first where I used Claude Code throughout — for data processing, chart iteration, and writing production code for the WordPress embeds. On a fixed budget, that made the difference between delivering five interactive visualizations and delivering three. There's a real tension in that, given the subject matter: the report documents the environmental cost of AI infrastructure at scale. The distinction I'd draw is between hyperscale compute — training runs, always-on GPU inference — and a coding assistant helping write lighter, more efficient client-side JavaScript. One is the problem the report is about. The other is a tool for building more efficiently within tight constraints. The report argues for reducing demand and building responsibly. That's what I tried to do.

Contact

Do you need support for your next project?

Time zone

CET

Current time

Reply time

2work days

Your next project starts with a conversation. Not sure if your project is a good fit? Read the FAQ first — it might answer your question before we even talk.