ESM data viewer on a 3D sphere using WebGL
Andrej Fast¹, Tobi Kölling², Fabian Wachsmann¹, Lukas Kluft²
¹DKRZ, ²MPI-M
Build an easy-to-use visualisation tool to
make climate science more explorable and tangible.
- 👀 show plotting without HPC
- 🔎 Simply and Interactively explore native grid Earth System Model (ESM) output
- 🔗 Share any dataset view via URL
- 🚅💨 no installation or compute server required
- 🎨 client-side rendering and color mapping no image pregeneration
Support and leverage any Zarr dataset stored in cloud environments.
📌 Recipe:
https://gridlook.pages.dev/# + ZARR_URI
Where ZARR_URI:
- ✅ Is openly accessible
- 🌐 Allows Cross-Origin Requests (CORS)
- ❌ A competitor to high-end visualization suites
- ❌ A tool for generating publication-quality graphics
👉 It’s built for intuitive, efficient, interoperable exploration.
- 🧠 Built with TypeScript
- 🌱 Frontend: Vue.js + Bulma
- 🔺 Rendering: Three.js (WebGL)
- 📦 Zarr handling via Zarrita
- 🌐 Regular Grids
- 🧭 Rotated Regular Grids
- 💠 HEALPix
- 🔺 Triangular (ICON)
- 🪢 * Irregular Grids
- 🌐 * Gaussian Reduced (e.g., ERA5)
💠 Healpix
Support for all datasets in the WCRP Global Hackathon HK25 catalog. Get to know the gridtype healpix with this ICON amip Dyamond3 simulation PT6h_inst dataset:
👀 Many of the following datasets have large chunks (~100MB).
Mind that when you are on mobile network or using a mobile device.
- 🔺 Triangular Dataset: EERIE ICON hist-1950 tas on R2B8 (10km)
- 🌐 Regular (lat x lon) Dataset: CMIP6 EC-Earth3P-HR highresSST-present pr, 30km. -> Support for CMIP
- 🧭 Rotated lat x lon Dataset: CORDEX REMO2015 historical tas on EUR11(12km) -> Support for CORDEX
- 🌐 Gaussian reduced (decreasing no of longitudes towards poles) Dataset: EERIE IFS hist 10fg on TCO1279 (10km) --> Support for ERA5
- 🪢 Irregular Dataset: CMIP6 AWI-CM-1-1-MR historical tos, 25km.
- 📱 Embed in web apps — even works on mobile
- 🧬 Understand model internals (e.g., ring-shaped precipitation in IFS)
- 🐛 Find bugs or diagnose outputs (e.g., Amazon River temperature anomaly in CMIP6 MPI-ESM1-2)
Precipitation rate in IFS Dyamond3 over the indian ocean
Cloud coverage in IFS Dyamond3 over the Pacific
🧊 DKRZ support for S3 and Swift datasets
STAC Integration as a DM test service: Buttons as Assets in STAC Items
🧊 DKRZ support for S3 and Swift datasets
works well for the HK25 data stored at DKRZ because of a performant institutional s3 cloud storage
Prepared datasets
works well for the HK25 data stored at DKRZ because we
- rechunked datasets
- enriched datasets (
crs, attributes) - brought it to cloud
- embedded links in catalogs
For CORS-enabled locations:
💡 Right-click .zmetadata to get the URL
→ append to Gridlook URL and remove .zmetadata
→ submit
-
Google Cloud CMIP6 Dataset
-
(Azure ❌ Not supported (e.g., Planetary Computer))
A minimal guide for DKRZ users:
-
Make your dataset CF conform for gridtype identification. Add
grid_mappingattribute used for "rotated_lat_lon" and "healpix"- coordinates:
latandlonvalues - better not encode
timeas "INT64" - (
long_nameattribute to variables)
-
Store zarr datasets in DKRZ cloud storage: swift (until 2026) and s3 soon.
cdo -f nczarr copy INPUT OUTPUT #reformat to zarr
module load swift #login
swift upload BUCKET OUTPUTWithout temporary output in Python with swiftspec
import xarray as xr
ds = xr.open_dataset(YOUR_DS_URI)
ds.to_zarr("swift://BUCKET/DS_NAME")Example: Fsspec intro(EERIE Hackathon 2023)
- Bucket setting: Publish and allow CORS
swift post BUCKET -r .r:* #publish
swift post BUCKET -m \
"X-Container-Meta-Access-Control-Allow-Origin:*" #set CORSOptimal Zarr-datasets for Web-Apps:
Reduce the amount of transferred data.
-
Chunks!
- aim for 1-5 MB
- are loaded in parallel (it's ok to load a few)
- are cached (on client-side usually only if smaller than 50MB)
-
Compress it!
🎯 makes climate science more explorable and tangible.