Green Web Foundation

State of the Fossil-Free Internet 2026

Fünf Datenvisualisierungen für das erste Jahresbriefing der Green Web Foundation — über schmutzige Rechenzentren, den Energiehunger von KI und die Lücke zwischen den Klimaversprechen der Tech-Konzerne und ihren tatsächlichen Emissionen.

State of the Fossil-Free Internet 2026

Herausforderung

Das erste Jahresbriefing der Green Web Foundation hatte ein klares redaktionelles Argument: Die größten Tech-Konzerne der Welt verfehlen ihre eigenen Netto-Null-Ziele immer weiter, angetrieben durch eine KI-getriebene Explosion im Rechenzentrumsbau. Die gestalterische Herausforderung bestand darin, dieses Argument in Visualisierungen zu übersetzen, die im Longread-Report bestehen, als eigenständige Presseassets überleben und in einer Keynote-Präsentation funktionieren — alles gleichzeitig, mit Fixbudget. Frühere Green Web-Reports stützten sich auf statische Charts und Text. Diese Ausgabe musste den Schritt von statisch zu interaktiv, von einmalig zu herunterladbar und von intern zu pressefertig vollziehen.

Lösung

Fünf Datenvisualisierungen — interaktiv und statisch — jeweils mit herunterladbaren PNG-Exporten: ein interaktiver 24-Stunden-Globus mit 950.718 Website-Checks (D3.js und GeoJSON), eine globale Rechenzentrum-Karte mit 10.852 Standorten in 174 Ländern (Leaflet), eine Flächenvergleichskarte mit dem Meta-Hyperion-Campus (Leaflet), Emissionsabweichungs-Small-Multiples für Google, Amazon und Microsoft sowie ein Transparenz-Scorecard der Cloud-Anbieter. Alle Produktions-Builds wurden direkt in die WordPress-Seite des Reports eingebettet.

Mein Beitrag

Meine Rolle war die des Data Visualizers: Konzept, Design und Produktionscode für alle fünf interaktiven und statischen Visualisierungen. Bevor auch nur eine davon entstand, habe ich in Observable Plot.js eine explorative Datenanalyse durchgeführt — Verteilungen kartiert, Diagrammtypen getestet, geprüft, wo das Signal stark genug ist, um ein visuelles Argument zu tragen. Diese Phase ist der Grund, warum es am Ende fünf Visualisierungen wurden und nicht acht: Einige Kandidaten haben sich beim Blick auf die tatsächlichen Zahlen nicht bewährt. Die Produktions-Builds wurden direkt in die WordPress-Seite des Reports eingebettet, mit einem herunterladbaren PNG für jeden Chart. Solana Larsen verantwortete die Report-Narration; Alice Apsey hielt visuelle Identität, Layout und PDF-Version; Nick Lewis baute die Website.
  • Kunde

    Green Web Foundation

  • Meine Role
    Datenvisualisierung
  • Zeitraum

    2025–2026

  • Zusammenarbeit

    Katrin Fritsch (Projektmanagement), Solana Larsen (Chefredaktion), Audrey Hingle (Kommunikation), Alice Apsey (visuelle Identität, Report-Layout, PDF), Nick Lewis (Web-Entwicklung)

Resultate

Report-Startseite
Report-Startseite
Der Einstiegsbildschirm des Reports — Hero, Navigation und der interaktive Globus bereits unterhalb des sichtbaren Bereichs. Der Report ist als scrollbarer Longread mit fünf nummerierten Abschnitten aufgebaut; der Globus ist der erste Datenpunkt, dem Leser:innen begegnen.
Globale Rechenzentrum-Karte
Globale Rechenzentrum-Karte
10.852 öffentlich bekannte große Rechenzentren in 174 Ländern, ergänzt durch ein Ranking-Balkendiagramm der Länder mit den meisten Standorten. Die USA allein stehen für 4.582 — mehr als die nächsten zwölf Länder zusammen. Der Chart-Titel stellt die Frage, die die Daten beantworten: Wie viele brauchen wir noch?
Flächenvergleich: Meta Hyperion
Flächenvergleich: Meta Hyperion
Eine interaktive Karte, die den Grundriss von Metas Hyperion-Rechenzentrumsgelände über den Central Park, die Pyramiden von Gizeh und das Maracanã-Stadion legt. Die Frage im Header — "Wie würden Sie sich fühlen, wenn das in Ihrer Nachbarschaft stünde?" — leistet, was die Karte allein nicht kann: die Größenordnung persönlich spürbar machen.
Emissionsabweichungs-Charts der Tech-Konzerne
Emissionsabweichungs-Charts der Tech-Konzerne
Small Multiples zeigen die unbereinigten Emissionen, marktbereinigten Emissionen und erklärten Netto-Null-Ziele von Google, Amazon und Microsoft von 2020 bis 2030. Alle drei Unternehmen bewegen sich in die falsche Richtung. Die Lücke zwischen Ziellinie und tatsächlichem Trend ist das Argument — zurückhaltend, bewusst unbequem, keinerlei Dekoration.
Transparenz-Scorecard der Cloud-Anbieter
Transparenz-Scorecard der Cloud-Anbieter
Eine Matrix bewertet Google Cloud, Amazon Web Services und Microsoft Azure anhand von vier Offenlegungskriterien. Amazon und Microsoft erzielen bei jedem Kriterium 0 %. Die einzige grüne Zelle in der gesamten Tabelle ist Googles stündliches CO₂-freies Energie-Reporting mit 90,24 %. Die Leere der übrigen Zellen ist das Argument.

Statische Assets

Green Web Check-Globus — Presse-Export
Green Web Check-Globus — Presse-Export
Die herunterladbare Presseversion des interaktiven Globus — dieselbe Visualisierung, ohne UI-Chrome, mit Report-Branding, der 58,9 % / 41,1 %-Legende und der Quellenangabe. Ohne weitere Bearbeitung in Pressematerial oder Präsentationen einsetzbar.
Emissionsabweichungs-Charts — Presse-Export
Emissionsabweichungs-Charts — Presse-Export
Der Presse-Export der Emissions-Small-Multiples — dasselbe Drei-Panel-Chart, nun mit Report-Branding und Quellenangabe, losgelöst vom interaktiven Report-Kontext und für den eigenständigen Einsatz bereit.

Prozess

  • Mit den Daten beginnen, nicht mit dem Design

    Der Prozess begann nicht mit Design, sondern mit Daten. In Observable habe ich den Green Web Check-Datensatz aus verschiedenen Blickwinkeln untersucht — geografische Verteilungen, Verkehrsmuster über 24 Stunden, Aufschlüsselungen nach Ländern und Städten. Diese Exploration war ein gemeinsamer Arbeitsprozess mit dem Team: Sie legte offen, welche Befunde tatsächlich überraschend waren und welche weniger interessant als erwartet. Die finale Auswahl der fünf Visualisierungen ist ein direktes Ergebnis dieser Phase. Ohne sie hätten wir gegen Annahmen entworfen.

  • Von der Exploration zur Produktion

    Nachdem die Datenexploration definiert hatte, was gebaut werden sollte, wechselte die Arbeit zu Figma-Mockups und dann direkt in den Produktionscode. Jede Visualisierung hatte von Anfang an zwei Ausgabeziele: ein interaktives Embed für den Webreport und ein herunterladbares PNG für Presse und Präsentationen. Diese Doppel-Anforderung prägte jede Gestaltungsentscheidung — Beschriftung, Annotationsdichte, Download-Affordanz — und wurde geklärt, bevor eine einzige Zeile Produktionscode geschrieben wurde.

  • Der fertige Export

    Das herunterladbare Presse-Asset für den Green Web Check-Globus — dieselbe Visualisierung, wie sie an Medien ausgeliefert wird: mit Report-Branding, der 58,9 % / 41,1 %-Legende und der Quellenangabe. Jeder Chart hatte eine Version wie diese: in sich geschlossen, ohne weitere Bearbeitung in eine Präsentation oder ein Pressematerial einsetzbar.

    Erkenntnisse

    KI einsetzen, um einen Report über KI zu bauen

    Dieses Projekt war eines der ersten, bei dem ich Claude Code durchgehend eingesetzt habe — für die Datenverarbeitung, die Chart-Iteration und das Schreiben des Produktionscodes für die WordPress-Einbettungen. Bei einem Fixbudget machte das den Unterschied zwischen fünf interaktiven Visualisierungen und drei. Das birgt eine echte Spannung, angesichts des Themas: Der Report dokumentiert die Umweltkosten von KI-Infrastruktur im Hyperscale-Bereich. Die Unterscheidung, die ich ziehen würde: Hyperscale-Computing — Trainingsläufe, dauerhaft laufende GPU-Inferenz — ist ein anderes Problem als ein Coding-Assistent, der hilft, schlankeres, effizienteres client-seitiges JavaScript zu schreiben. Das eine ist das Problem, das der Report beschreibt. Das andere ist ein Werkzeug, um innerhalb enger Rahmenbedingungen effizienter zu bauen. Der Report plädiert für weniger Nachfrage und verantwortungsvolleres Bauen. Das habe ich hier versucht.

    Porträt von Christian Laesser

    Kontakt

    Brauchen Sie Unterstützung für Ihr nächstes Projekt?

    Zeitzone

    CET

    Aktuelle Uhrzeit

    Antwortzeit

    2Werktage

    Jedes Projekt beginnt mit einem Gespräch. Nicht sicher, ob Ihr Projekt passt? Zuerst die FAQ lesen — vielleicht beantwortet sie Ihre Frage, bevor wir sprechen.