The Relicans

Cover image for Hack The Weather! with historical weather data
Anabella
Anabella

Posted on

Hack The Weather! with historical weather data

What I built

Hack The Weather is an app that uses historical weather data to show today's average temperature in a city as well as what was the temperature on the same day 1, 2, 3, 4 and (almost) 5 decades ago (that's as far as the API's historical data goes).

Category Submission:

New Year, new resources

App Link

https://hack-the-weather.netlify.app/

Screenshots

It's interesting to look at the results, not only for average temperature (big number), but also for the difference that can be found in min and max temperatures, giving more context of what the weather felt like each day.

Hack the weather homepage

Today's weather in Ulaanbaatar, Mongolia

Today's weather in Tokyo, Japan

Today's weather in Barcelona, Catalunya

Today's weather in Cluj, Romania

Twitter share card

Description

I originally created this app last year as a way to compare today's weather with yesterday's. Hardly any weather applications lets users look at the weather conditions for days before. It's often all about the forecast of upcoming days. The idea was that by comparing today's weather with what it was like the day before, it would be more meaningful to users than just an abstract number for the temperature.

Iterating on that, me and my friend and colleague Alba were curious about what would happen if we used the vast amount of available data on historical weather to query for temperature on the same day throughout the years and decades. And we were surprised to see that even in such a small-scaled sample it's often easy to notice the rate at which temperatures have increased for any given day.

We think it can be a valuable resource to give people visibility on this very serious problem we're facing as Humankind. Rather than showing hard, distant scientific data, offering something people can directly relate to and experience on their own, but supported by scientific facts.

The color coding for the whole site is based on temperatures: the opacity and color of each day's card, and the theme for the charts. To make it easier to see the temperature's evolution, Alba added 2 charts using Chart.js on React. One is a bar chart to see the temperature on each day, and also a line chart showing the evolution of the gap between min and max temperatures.

Finally, we added the functionality to share a link to an specific location, using the URL's query params, and in order to use this sharing feature as much as possible, the option to share the link in a tweet or a Telegram message.

Link to Source Code

https://github.com/anabellaspinelli/delta-weather/tree/hack-the-planet

https://github.com/anabellaspinelli/weather-proxy-api/

Permissive License

MIT

Background

This is a small proof of concept but I think its main strength is that is deals with data people often consult and use, rather than big-scale scientific data that might mean little to most people. I would like to expand it to other daily weather information people use (humidity, wind, precipitation) to give a more complete comparison of all of one day's weather, not just the temperature.

How I built it

We used VisualCrossing Weather API, a freemium weather API (prices are super cheap after a basic daily request limit) with tons of historical data. It was incredibly helpful in solving things for us: location resolution that just works, easy to navigate docs, a query builder, and even support for custom time periods (like yesterday, today, etc.) in requests, instead of accepting just date formats.

The app is comprised of a frontend built with react and a backend built with node+typescript, mainly used to mask the requests to the API (and the API key that goes with it) and resolve some logic so that the data requested by the client is more light weight, thus optimizing performance.

I used Netlify to host the front end, through its integration with GitHub. This way site deploys every time a given branch is pushed, making iteration super easy. The backend is hosted in Heroku, with a similar mechanism.

Adding New Relic to FE and BE was surprisingly easy. Just dropping a file in the project (and adding a dependency, in the case of node) was enough to get the first results instantly and start playing around to see what information could be more valuable for monitoring the app.

What features of New Relic did you utilize when creating this project?
We used the New Relic Node.js agent to monitor activity both in the backend and in the frontend: which locations people search, where they're accessing the site from and specially for this app, monitoring the usage of the free API and get alerts if it goes over the daily limit.
The Weather API returns the cost of each request on the response payload, I have added a custom metric called WeatherQuery/Cost where I increment this metric for each of the queries. That way I can configure an alert to know when the cost of the API is about to go over the daily free limit.
Custom WeatherQuery/Cost metric

I am also sending a custom event WeatherQuery with the locations the users are looking for
List of location searches

Dashboard showing were visitors are accessing the site from
Dashboard showing were visitors are accessing the site from

Performance monitoring dashboard
Performance monitoring dashboard

Web transactions dashboard
Web transactions dashboard

Stack
Frontend: React on Netlify

Backend: NodeJS + Typescript on Heroku

Data: Visual Crossing Weather API

Additional Resources/Info

I added some resources at the bottom of the page to help people understand what the see and give a broader context. Example: temperatures may seem more extreme in the cold, sub-zero area and it's important to help people understand that that sort of thing does not refute global warming, as it's easily explained by scientists observations.

Here's some of them:

https://www.bbc.com/news/science-environment-24021772
https://climate.nasa.gov

Final words

These are our DEV.to profiles, if you wanna follow updated to what we add to the site in the future:

https://dev.to/albarin
https://dev.to/anabella

Discussion (1)

Collapse
picsoung profile image
Nicolas Grenié

I didn't expect to find this result for San Francisco, looks like it's getting colder 🤯

Good job @albarin and @anabella