I’m going to create a website where users can get a quick look at historical record high temperatures throughout the United States along with what the average temperature is for any given date within the year. Users will select a location and date to return a bar chart of the last 10 record high temperatures in addition to the average high temperature for that day.
Over the last couple of years the weather feels like it’s becoming more extreme. I keep asking myself “is this normal?” and want to see what history can tell me. I’d like to document the process of creating this website as part of my writing to become a better writer process.
Outline
The website will consist of a single web page with the following options for the user to select the location and date for which to return the data for.
State – A list of all the states in the United States. This field will be required as it is needed to get data for the next dropdown which is a list of each available station.
Station – A list of a particular weather station to query. Examples are Grand Marais or Minneapolis International Airport.
Date – The date to return the temperature data for. This will be a calendar pop up for the user to select a date easily. The year does not matter in this case.
Submit button – The button to make the magic happen.
Aside from the historical records, I will also return the average high temperature for the selected date.
Finding a data source
The first step is finding a good data source to provide the temperature data to the website. Local meteorologist Mike Augustyniak maintains a really nice set of tables for all of the Minnesota Weather Records. At first I thought Mike’s cohort of data would be a great place to start. I actually reached out to him on Twitter to get his blessing which he kindly responded saying to go for it. The thought of copying all that data or even writing a parser seemed like a big lift at the time. But, shortly after tweeting with Mike I came across the Applied Climate Information System which has a web service that provides a huge amount of climate data for free. The ACIS provides a query builder wizard to help you create requests for every weather station in the country. The use of this service gave me the idea to open this website up to handle queries for the entire country. Since the data is available we might as well use it, right?
Using the query builder I was able to put together this POST request to return the top 10 record highs for a given date. In this query I’m using January 1st. From the query results below you can see that this will return exactly the data I need. With this response I only need to order the results and pipe them into a charting software.
var url = "https://data.rcc-acis.org/StnData",
params = {
"sid":"MSPthr",
"sdate":"por",
"edate":"por",
"elems":[
{
"name":"maxt",
"interval":"dly",
"duration":"dly",
"smry":
{"reduce":"max",
"add":"date",
"n":10
},
"smry_only":1,
"groupby":[
"year",
"01-01",
"01-01"
]
}
],
"meta":[
"name",
"state",
"valid_daterange"
]
};
postResults(url, params);
The above query returns this result:
{
"meta": {
"state": "MN",
"name": "Minneapolis-St Paul Area",
"valid_daterange": [
[
"1872-10-01",
"2021-12-02"
]
]
},
"smry": [
[
[
[
"48",
"1897-01-01"
],
[
"43",
"1998-01-01"
],
[
"42",
"1913-01-01"
],
[
"42",
"1880-01-01"
],
[
"41",
"1964-01-01"
],
[
"41",
"1944-01-01"
],
[
"41",
"1892-01-01"
],
[
"39",
"1950-01-01"
],
[
"39",
"1894-01-01"
],
[
"39",
"1874-01-01"
]
]
]
]
}
The next step in creating this website is to wire up the response to a React front end. I’ll cover the front end set up in another blog post.