SurferSight
coastal weather visualization

December 15, 2014

My first practical application in HTML/CSS was to create a multi-page website that integrates the use of weather buoy GeoRSS feeds to map out weather data along the east and west coasts of the U.S. The weather data is culled from the NASA Jet Propulsion Laboratory datacasting site. I imported the data from the 300+ buoys into Google Spreadsheets and parsed the information into seven different categories pertaining to wave, wind, and water information. I converted the Google Spreadsheet into a Google Fusion Table, which allows one to plot data points on top of the Google Maps API.

Contrary to the GeoRSS feeds, the heatmap does not have the ability to dynamically update hourly. The Fusion Table used to generate the website graphics can be found here.


The interactive frame above shows the interface of the site. The GUI for the site is identical to the Google Maps interface, making it more intuitive for users to navigate. Since the sight is a visualization platform, it's important that the filtering icons (on the right) are aesthetic and descriptive, yet don't overpower the map visual. The icons will give the user more information only when the user hovers over the icon, which is consistent with my design intention.