top of page

Rainy with You

Interactive Web Design | 2020 |Group Project|P5js

The main idea is to create a webpage where the users can search for the humidity data of the city of Shanghai. The project is a data visualization project which includes a 30-day-data of Shanghai’s humidity in 2020. The users would be able to select a range of days (from 1-30 days according to their choice) and a range of humidity (from 0-100). The selection would generate a different graph on the main page. The graph will be drawn with raindrops in a grid, which will display different color hues according to the humidity. Then, when the users click each raindrop, they can skip to a separate web page that shows the change of the humidity in a day. The change of humidity will be shown in an arc pattern that will give the users a direct indication of how the humidity changes in a day.


Instructions: 

  1. Click anywhere to start.

  2. Move the slider to control the number of the shown raindrops.

  3. Click on the raindrop to move to another page and click “back” to go back to the previous page.


Link to Presentation view of the sketch: https://sierra-q.github.io/final-project/

Link to Code view of the sketch: https://github.com/Sierra-q/final-project/commits/master/sketch.js?author=JasminShi

Project Gallery

bottom of page