Visualizing Weather Data

Functioning weather apps built with JavaScript.

Collaboration level
Individual
Timeline
2 weeks

In this assignment, 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.

In-class Project
MIT 4.032 Design Studio: Information and Visualization (2018 Spring)
Output
Designed and built two functioning weather apps with JavaScript(d3.js).

Visualization 1: More Abstract

Fully functioning weather app focused on the aesthetics and visual representation.
Screen ratio is based on iPhone X.


Background variations
  • Sunny
  • Partly Cloudy
  • Cloudy
  • Rainy
  • Snowy
  • Foggy
  • Set back to default

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. 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

Process

Paper Sketches


Visual Design

Sketch 1: More Abstract Visualization


Sketch 2: More Literal Visualization