Visualizing Weather Data

Two functioning weather apps built with JavaScript.



Duration
2 weeks

Tools
Sketch
HTML/CSS/Javascript


collaboration
Individual
The Challenge

Students were asked to develop two visualizations of the current weather in Cambridge, MA — one literal and one abstract — using three or more variables from forecast.io API.




Visualization 1: More Abstract


Fully functioning weather app focused on the aesthetics and visual representation. What you see is the MIT dome and the real-time weather in Cambridge, MA.

You can click on °F/C to switch between Fahrenheit and Celcius. Click on the background variations to see how the visualization changes according to the weather.


Background variations







Cambridge

00

°F

/C

Sunday, March 4th
time-2
NOW
time-1
time-2
time-1

Visualization 2: More Literal


Fully functioning weather app that uses daily temperature range as an additional variable.

You can click on °F/C to switch between Fahrenheit and Celcius. Also makes use of horizontal scrolling.

Cambridge

00

°F

/C

time-2
NOW
time-1
time-2
time-1
Sunday, March 4th
Mon
Mon
Tue
Wed
Thu
Fri
Sat


Original Sketch



Visual Design

Visual Design Using Sketch.



App 1 - More Abstract Visualization



App 2 - More Literal Visualization