Swell Sounds

Swell Sounds, written in p5.js, is a data visualization that accesses oceanic information from magicseaweed and worldtides.info APIs. It currently focuses on the World Surf League’s events, however, it can easily be adapted to display any other location available via magicseaweed. It displays the following information at a glance for each location: swell direction, period, rating and size; conditions: water and air temperatures, and cloudiness; wind direction and force; tide direction and level.

Aside from being a data visualization, it is experimental in the realm of data sonification. By tapping, or clicking, anywhere on the screen, Swell Sounds converts the swell period and size into an auditory experience, which allows the end-user to hear a single wave pass by. The swell size is scaled to low and high frequencies; larger swell = lower frequency; smaller swell = higher frequency. The swell period is scaled in time (seconds), e.g. a 19-second period creates a 19-second sound. This concept was explored as a way to extend the human perception and comprehension of data without the use of a written or spoken language.

Swell-Sounds_Phone-Mockup-3Click here to see Swell Sounds Live.



The epicenter of Swell Sounds serves as a rating system for each spot that is displayed. All information radiates about this point.



The direction of the swell begins at the epicenter and fans out towards the first ring (water temperature); it depicts where the swell is coming from, and will fluctuate in width depending on the angle of the swell. It is colored based on the size of the swell.


The swell period determines the diameter of the rings in Swell Sounds. The larger the diameter, the longer the period; the smaller the diameter, the shorter the period.




The conditions are formatted as a section cut of the earth, i.e. water (first ring), air (second ring), clouds (third ring).

Water Temperature

Colors are based on the packaging of Mr. Zog’s Sex Wax; it serves as a quick reference for what surf wax should be used.


Air Temperature





The tide level is shown as a white horizontal line. The daily tides are scaled to the diameter of the outermost ring (cloudiness); high tide on top, low tide on bottom. The colored circle on the right shows the tide’s direction; green = tide is going up; red = tide is going down.



Similar to the swell direction, the wind direction shows where the wind is coming from. It can be seen terminating into the epicenter, overlapping the three rings, and extending outside the canvas.


This element uses the modern Beaufort Scale to visualize wind force.



Disclaimer: Tidal data retrieved from www.worldtide.info. Copyright © 2014-2017 FaMe IT. Licensed for use of individual spatial coordinates on behalf of/by an end-user. Source data created by the Center for Operational Oceanographic Products and Services (CO-OPS) and is not subject to copyright protection. NO GUARANTEES ARE MADE ABOUT THE CORRECTNESS OF THIS DATA. You may not use it if anyone or anything could come to harm as a result of using it (e.g. for navigational purposes).