ASSIGNMENT 7: CONCENTRIC WEATHER MAP

Concept

When conceptualizing this project, I wanted a way to be able to visualize weather through symbols, such as images, color and movement. While I ultimately added a text feature that would display some details of the current weather forecast, I also was able to represent this same data visually without words.

Inspiration

Concentric map of the world

Concentric map of the constellations

Map Features

1. In the top left-hand corner of the map, there is a block of text describing the current temperature, forecast, wind speed, and wind direction that updates when the page is refreshed. The background color of the page is based on the current temperature. The warmer the temperature, the warmer the color.

Code for calling and displaying temperature, forecast, wind speed, background color, and wind direction:

2. In the center of the map is a double-ringed circle, with a smaller circle rotating around the middle circle.

The center of the circle holds an image of the sun, however you may not be able to see it--a div is positioned over it, which is programmed to change in opacity based on the number of clouds in the sky. The more clouds, the less visible the sun is. The code for it is here:


The smaller circle that rotates moves based on the current wind speed. The higher the wind speed, the faster it rotates. It's color is also based on the wind's direction.