In my last project I used a Raspberry Pi and a few temperature sensors to record the temperature from the inside and outside of my flat. While I saw the csv files fill up over the months I tried to find a good use for the data. At first I was looking for private weather clusters where people can contribute local (up to date) temperature data but I didn't find a page like that.
I also tried to code a temperature prediction algorithm that could tell me how the weather will develop but that would need years of data and I only got a few months. So I went another way: I made a HTML5 canvas page that visualized the data and colored it from blue (cold) to red (hot)
This "sunset" was the result:
This sunset is made out of small boxes where every box stands for a measured temperature. Note that this is actually a 2D representation of 1 dimensional data (it should be a long line but is rendered as 2D. The color of the box is calculated by a temperature scale. At first the script looks for the lowest and the highest temperatures and uses them as scale for every temperature and calculates the color. The size of every box is calculated by how many temperature entries there are and how big your screen is.
You can really see the heatweave in the beginning (July and August) and even in the heat you can see when it started raining (the colder boxes).
A fun thing I can do is tell the script how detailed it should render. The picture above is rendered with a detail of 10 (which actually means just that I just use every 10th temperature to create a box)
The following render has a detail of 100 but even though it has a lower detail value you can see day/night cycles much better.
In comparison detail 1 (the highest detail level) has too much information to be readable
And just for fun the inside temperature rendered in detail 10. Note that the temperature scale for this is different. Red and blue don't mean the same temperatures as in the outside temperature graph since the color levels are calculated by lowest/highest from the data at hand.
You can find the live version here. You can click on any box on the screen and it will show you when it was and what the temperature was. It also has to process the big csv file which is why it could take a few seconds to load.
For the geeks -> the Code
The color calculation function
function getColor(temperature)
{
var t = warmest+coldest; //warmest and coldest were set at loading
var red = (255 * (temperature / t));
var green = 0;
var blue = 255 - (255 * (temperature / t));
return 'rgb(' + Math.round(red) + ',' + Math.round(green) + ',' + Math.round(blue) + ')';
}
Comment using SSH! Info
