Mark Roland

a portfolio of art, design and technology

Weather Widget

September 24th, 2011 — Foothill Ranch, CA

This Weather Widget is the completion of a project that started in 2005 while I was working on the web site for the EECS Department at the University of Kansas. The department wanted to integrate a weather widget into their web site.

At that time I didn’t know how to integrate a feed of weather data, however I did know how to create illustrations of the various weather conditions as they would look on campus. So that’s what I did while someone else merged the illustrations with the data.

Now that I know how to do that myself I thought I would spend a couple hours to grab some weather data and associate the weather conditions with the graphics I created six years ago. Below is a live demo, with the PHP source code listed below that. The script loads the latest RSS weather data from the Yahoo Weather API and parses it. The widget is rendered using HTML 5 and some new CSS 3 properties (border radius and shadows).

A complete list of the weather condition illustrations can be viewed at

Weather Widget Live Demo

Media: Adobe Fireworks PHP

Source Code

Tags: Programming Web Development Information Visualization

Related Projects: EECS Newsletter