Inspiration
We built BeatTheHeat because heat is the number one weather-related killer and most people have no idea how to protect themselves.
What it does
The site pulls real temperature data from NASA's GLOBE Program API and displays it on an interactive 3D globe where every dot is a real measurement from a real place. Below the globe is a full survival guide covering what to do before, during, and after a heat wave, plus three interactive tools
How we built it
We used AI to help build the globe and the slider, but we chose the API, picked India for its world-record temperature, and redesigned the site several times until it looked like something worth taking seriously.
Challenges we ran into
The biggest challenge was the globe API data. The GLOBE Program API returns data in a format that required careful mapping the property names for temperature and measurement date changed between API versions and we had to debug the actual response structure to extract the right fields. We also had a hard time making the before/after India slider work correctly: our first approach resized a div, which caused the SVG map to squish and appear off-center.
Accomplishments that we're proud of
We're proud that every data point on the globe is a real measurement from a real place and time. We're proud of the before/after slider it was technically the hardest part and it communicates the scale of the problem better than any text could. And we're proud that the site is genuinely useful: someone who lands on it during a heat wave can find out within seconds what to do, what the warning signs are, and whether their current conditions are dangerous.
What we learned
On the technical side: how to call and parse a real external API, how to render live data on a 3D globe, how SVG clip paths work, and how to build interactive UI tools in pure JavaScript without any framework. On the human side: that the way you present information matters as much as the information itself. A wall of text doesn't change behavior but an interactive quiz you get wrong, a drag slider that shows you a country turning red, and a calculator that tells you your personal risk level just might.
What's next for BeatTheHeat
We want to expand BeatTheHeat by adding more countries to the before-and-after slider, each with real temperature data and local city information, so people can see how extreme heat looks in their own region and not just India. And to add more countries on the globe.
Built With
- css
- globe.gl
- html
- javascript
- lato
- lato-(google-fonts)
- nasa-globe-program-api
- playfair
- playfair-display-(google-fonts)
- svg
- three.js
- unsplash
