Creating a Real-Time Glacier Melt Monitor with Satellite APIs and D3.js

Glacier melt data usually arrives weeks—sometimes months—after the fact. Satellite scans are frequent, but the analysis cycle is slow, and by the time insights land, the trends are already outdated.

So I built a real-time glacier melt monitor—a simple tool that pulls satellite image tiles, processes them with basic math, and streams the melt visuals to a browser using D3.js.

No bloated ML models. No massive cloud pipeline. Just raw Earth observation data, Python for the backend, and clean in-browser visualization.

Environment Setup

Backend:

• Python 3.11
• Libraries: requests, PIL, numpy, Flask
• Runs locally or on small AWS EC2 (t3.micro)
• .env file for API keys and tile settings

Frontend:

• D3.js 7.x
• Vanilla HTML/CSS
• No React, no framework bloat
• Hosted via AWS S3 (static site)

Data Source:

• Copernicus Sentinel-2 API (primary)
• OpenEO (fallback)
• Tested NASA Earthdata too — but auth was a headache
• Tile format: GeoTIFF or scaled PNGs

The Workflow

Here’s how the system works, end to end:

1. User Input:
   The user selects a glacier region (lat/lon bounding box)
2. API Call:
   Backend fetches the latest 3–5 satellite images
3. NDWI Analysis:
   Each image is processed to isolate snow/ice using NDWI:
   (G−NIR)/(G+NIR)(G – NIR) / (G + NIR)(G−NIR)/(G+NIR)
   For Sentinel-2, this uses Band 3 (green) and Band 8 (NIR)
4. Image Processing:
   • Convert image to grayscale mask
   • Apply NDWI threshold (~0.2)
   • Estimate snow/ice surface area
5. Delta Calculation:
   Compare current area vs previous snapshot
6. Frontend Visualizes the Data:
   • Glacier boundaries overlayed on a map
   • Color-coded status:
     • Blue = Stable
     • Yellow = Shrinking
     • Red = Rapid melt
   • Melt trend bar graph (30-day window)
   • Tooltip with timestamp, source, and area stats

Python (Backend) Highlights

• Pulls imagery every 5–10 days depending on cloud conditions
• PIL + NumPy handle tile conversion and NDWI calculations
• Flask exposes a simple API to serve JSON summaries
• Auto-skips tiles with >40% cloud coverage
• Stores latest 5 snapshots per glacier zone

D3.js (Frontend) Highlights

• Base map powered by Mapbox
• Interactive glacier overlays with zoom control
• Melt deltas updated daily
• Colorblind-friendly palette used for accessibility
• Lightweight enough to run on mobile (tested)

What Worked (and What Didn’t)

> Worked great on Karakoram and Alaskan glaciers
> Low-latency: most “latest pass” data arrives within 12–24 hours
> Visualization is crisp, even on lower-end devices
> No third-party cloud vendor lock-in

>Cloud-heavy tiles required fallback logic
>Some tile APIs failed silently — added retries + logging
>NDWI threshold tuning needed per glacier zone

Best Practices

• Cache tiles locally to save bandwidth
• Use a colorblind-safe palette
• Rotate logs weekly on the backend
• Use known stable glaciers as control benchmarks
• Implement auto-retry for flaky APIs
• Compress tile data before analysis
• Limit map zoom to reduce frontend rendering load
• Log API failures and fallbacks for audit

Use Cases

• Climate researchers tracking melt events
• Journalists building data-backed stories
• Field teams prepping glacier expeditions
• Educators teaching Earth science with real data
• Public dashboards raising awareness

Conclusion

This project showed that real-time glacier tracking is possible, even without big budgets or deep learning pipelines. With open satellite APIs and tools like D3.js, you can build clean, live visualizations from space imagery — no PhD required.

The next steps? Add melt alerts, implement glacier-to-glacier comparison, and maybe overlay temp + precipitation data.

It’s a small project, but it fills a big gap. And it’s light enough to run on a Linux laptop, without a research grant.

Read more posts:- Developing a Real-Time Database Schema Visualizer with Neo4j and Cytoscape.js