Urban Data Challenge Visualization

0 Comments | This entry was posted on Apr 08 2013


I entered this data visualization into the Urban Data Challenge, a contest focused on exploring urban governmental data sets through visualization.

The challenge was to create a visualization of transit system data for the week of October 1, 2012 from data provided by the cities of San Francisco, Geneva, and Zurich. My submission received an honorable mention.

You can read about my data visualization on the Info page of the visualization itself.

If you have any questions about the technologies used, the details of the code, etc, please don’t hesitate to email me at: matt [at]


San Francisco Surf Conditions

1 Comment | This entry was posted on Nov 17 2009

surf data viz

I recently built this data visualization to show surf conditions for the San Francisco Bay Area. The visualization uses data from two different sources:

  1. the San Francisco Bar buoy about 4 miles southwest of the Pt. Bonita lighthouse and
  2. a WeatherBug weather station at Lafayette Elementary School.

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).

The buoy data visualization uses 9 concentric wedges, representing the 9 period bands, centered on the buoy location on a map of the Bay Area. Smaller blue wedges represent wind swell (<12 seconds) and larger green wedges represent ground swell (>=12 seconds). The area of each wedge corresponds to the amount of energy in that period band, and the angle of each wedge indicates the direction of the swell. The wedge representing the dominant swell is outlined in white, and when you hover over a wedge, two things are displayed: (1) a line with the direction of the swell in degrees and (2) a popup with the period range and energy.

When you first launch the visualization, it loads the last 2 weeks of data, starts animating, and stops when it reaches the most recently available 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), and you can change the date range using the buttons in the lower right.

To see a big swell, use the “Specific Date” button to change the date to November 6, 2009.

Read more »