The website designed by Cinzia Bongino for IFAB makes a section of the European Extreme Events Climate Index (E3CI) data publicly accessible—offering a clear, dynamic overview of major weather-related hazards experienced across European countries. Over 40 years of data, made available with minimal loading times.

We partnered on Design consultancy, Frontend + backend development, Server management

Design Cinzia Bongino

Year 2023

The platform offers eight different “views” of the climate index, each defined by its own colour identity. To support this, we established a global theming system: a centralised set of design tokens connected directly to the designer’s Figma file. These variables drive the entire interface—every page background, every chart, every tooltip, and legend responds not only to the selected data view but also to the user’s light or dark mode preference.

The result is a user experience that feels visually coherent and context-aware, whether you’re browsing in sunlight or presenting in a dark lecture theatre. The theme defaults to the user's system settings but can be manually overridden at any time.

A platform this data-rich could easily become heavy. To avoid loading gigabytes of information into the browser, we moved the entire data-processing pipeline server-side. The frontend’s sole responsibility is to display.

Behind the scenes, a custom Python script runs monthly, transforming raw climate data into hundreds of pre-compressed JSON files. Each file is structured for fast lookup and streaming into Mapbox or chart components. Nothing is downloaded until it’s needed—keeping the interface light, fast, and stable, even when dealing with data from over 40 years of climate extremes.

Every visualisation was developed in close collaboration with Federica Guerrini, climate data scientist at CMCC, to ensure scientific accuracy at every stage of interaction.

Mapbox was our choice for all map-related features, thanks to its flexibility, strong theming support, and developer-friendly API. Rather than instantiating a new map on every page—a common but costly approach in terms of performance and API usage—we built the platform around a single, persistent <MapboxMap/> component.

This setup, made possible by Nuxt 3’s component architecture, allows us to reuse the same map instance across multiple views. The result: faster transitions, less data fetching, and smoother animations. The bulk of processing happens during the initial load; from there, the experience remains fast and fluid.

We implemented four types of charts—a plot, a bar chart, a heatmap, and a beeswarm—each rendered in the browser, on the fly, using raw JSON data and chart.js.

Client-side rendering provides two key benefits. First, it ensures maximum responsiveness: charts adapt fluidly across screens, from desktop monitors to mobile devices. Second, it allows real-time redraws when the data changes—without reloading the page or fetching new assets.

The platform isn’t just for browsing—it’s designed for communication. Regularly used by the CMCC (Centro Euro-Mediterraneo sui Cambiamenti Climatici) team in talks, reports, and newsletters, it needed to support both static and interactive outputs.

We developed a custom export function that allows users to save any chart or map as an image—directly from the browser, without relying on pre-generated assets. When interactivity is required—for example, embedding a map in a newsletter or live presentation—each page includes a lightweight, embeddable version with minimal UI, accessible via the share menu.

E3CI is a project by IFAB (International Foundation Big Data and Artificial Intelligence for Human Development). Implemented by Euro-Mediterranean Center on Climate Change (CMCC), Leithà Gruppo Unipol. Distributed by Hypermeteo, and Radarmeteo. UX/UI design, data visualisation: Cinzia Bongino, with the supervision of climate data scientist Federica Guerrini.

Frontend: Nuxt 3, Pinia, Naive UI, Mapbox Backend: Node.js, Python, Pocketbase