Temperature visualization

from 6 months of data

Posted by Christian Haschek on 2014-02-11
Never miss a post by liking this blog on Facebook

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:

Visualized temperatures from 6 Months

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.

Lower resolution of the render

In comparison detail 1 (the highest detail level) has too much information to be readable

highest resolution render

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.

inside temperatures of a year

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) + ')'; 
}

Tags: canvas | code | color | haschek | heat | hot vs cold | html5 | image | javascript | monitor | png | raspberry pi | temperature | visualizing
1.956

There are no ads on this (https enforced) blog. Please help me to keep it that way
1ChrisHMgr4DvEVXzAv1vamkviZNLPS7yx
0x1337C2F18e54d72d696005d030B8eF168a4C0d95