Category Archives: CC Lab

Idea
People are always saying that “last year wasn’t as cold as it is now” or “20 years ago you didn’t had that much rainy days in September”… What if they could actually make those comparisons?

1. DataI worked with the data from the Wunderground API. First, it gets three variables from today’s weather: temperature, high and low.
To make a proper comparison, I would have to calculate month or seasons average from previous years. I don’t know exactly what would make more sense. Also, my API account allows for a limited number of searches in the database. So, it would be impossible to search for several days/months/years.
Instead, I chose to make a comparison between today and this same date in a specific year. The user can choose from 1963 to 2012 (yep, 50 years was an arbitrary choice).

Wunderground’s API also provides you what it calls “almanac”. It is a list of historical variables for that date, like normal high, normal low, highest temperature ever and what day it happened.
I though that normal high and low would provide a reasonable parameter for comparisons.

2. VisualizationThis is a very simple line graph. The intention is to show how those 2 days compare.

The “normal historical” temperatures serve as a base for the comparisons. Two things needed improvement:
– make clear that the historical value is a secondary data;
– adjust the scale so that the main data is always readable.

Technical hurdlesI began with the wrong approach: pasting my own code and changing the syntax from openFrameworks to javaScript. It took a long time to work.
I stepped back then and made a simple exercise with arrays and objects. I assigned different colors to an object and assigned it to and array:It’s hard to believe that you can assign anything to an array element in javaScript. The code for that was:

Notes
1. At first, I used setInterval. But it seemed that the mouse response was slower with that. Dragging the mouse would leave separate circles in the surface, instead of a regular flow. I changed it to mouse move, then.
2. Even so, it doesn’t work as fast as in openFrameworks. I tried a lot of different things — changing the square size, decreasing the number of particles etc. That was the best I could get.
3. I was using the same code as in the previous assignment to make the canvas resolution look better in retina displays when in Chrome and Firefox. That probably added extra processing to it and slowed down the particles, since it doubles the pixels and then shrink them again. I removed that. I recommend testing it on Safari.
4. Interaction doesn’t work on Firefox. I have no idea why.

4. NotesThis is not relevant, but there was an annoying thing in the page so far: Chrome and Firefox render badly the canvas element on a Macbook Retina. I found the reason and the solution for that in this article and added it to my code.