codebones

Here is a prototype of an application I’m building to visualize surf conditions for the San Francisco Bay Area. It’s written in Flex and uses the Axiis data visualization framework. Many thanks to Tom Gonzales for the inspiration, code samples, and encouragement that helped motivate me to take this on.

Currently, the application only shows data for one CDIP buoy – the San Francisco Bar buoy that sits about 4 miles southwest of the Pt. Bonita lighthouse. The buoy provides a spectral analysis of wave energy broken down into 9 bands of wave period ranges. For each period range, the buoy provides direction and energy, which is measured by area (cm^2).

I plan to add more information to this application, like:

• air temp – both at the buoy and at a weather station in the Richmond
• wind speed & direction – both at the buoy and at the weather station
• water temp at the buoy
• tides (and moon phases?)
• sunrise/sunset

I also might add more buoys, but unfortunately, we don’t have any other CDIP buoys close by (except one about 25 miles west of Pt Reyes). The nearby buoys (46012, 46026, pryc1) provide different measurements than CDIP buoys, so I’ll need to figure those out before I can add them to the app.

Please let me know what you think, and if you have any suggestions. More details below…

Currently, the application automatically loads the last 2 weeks of data. When you first launch the app, it animates through the data once and stops when it gets to the most recent data, which should be from within the hour. You can stop & start the animation using the button next to the buoy title (near the bottom).

The buoy graphic shows 9 concentric wedges – representing 9 different period ranges. Smaller blue wedges represent wind swell (up to 12 seconds) and larger green wedges represents ground swell. The wedge representing the dominant swell is outlined in white. When you hover over a wedge, it displays two things: (1) a line with the direction of the swell in degrees and (2) a popup with the period range and energy.

At the bottom of the screen, there is a line chart the plots all the data for the past 2 weeks. There is a line for each period range in the same color as the corresponding wedge. You can also click on the line chart navigate through the data.

If you run the app near the time of this post, you will very clearly see the giant swell that hit San Francisco starting around November 6, 2009.

Again, suggestions are welcome. Please let me know what you think.

•