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 one-page weather app focused on the aesthetics and visual representation. Visually represents 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 one-page 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


Design Process

Original Sketches



Visual Design