Oceanography Visualization
Here is a running copy of the visualization I put together for Adobe MAX 2009.
This visualization takes data collected by ocean buoys (CDIP) and plots them visually to make it easier for myself to know when the surf is good and if it is getting better or worse. You can watch the full presentation where I explain this visualization in detail here: http://www.twgonzalez.com/blog/?p=267
Here is a brief synopsis:
4 Buoys visualized
Each buoy breaks down wave energy along a spectrum banded by 9 ranges of wave periods.
Arc segments with longer radi represent longer periods (shorter wedges represent less powerful wind swells, longer wedges show more powerful ground swells.)
The length (size) of the arc is determined by how much energy is within that specific band of swell period (more arc length equals more energy.)
Interactivity:
1) You can select a particular buoy by clicking its label – that will then display a 2 week history for that buoy in the histogram along the bottom.
2) You can roll over any particular wedge and see a datatip with a 12 hour history for that particular period. The energy shown is in cm2 and represents the surface area underneath the wave – it does not directly correspond to wave height.
3) You can animate the 2 week period by pressing the play button within the histogram.
3) You can pause the animation and manually move the animation forward with left/right arrow keys
4) You can also use your mouse click to skip to any section of the time period.
I have plans to add more to this visual over time, and I actually have a version working against live data, I just need to carve out the time to publish it to my server.
8. December 2009 at 15:56
Excellent example Top. I wish you could give the community some more time!! All your works are great inspiration for us. I see the code that you posted in the MAX but not the current one. When are you expecting to do so?
Regards…
8. December 2009 at 16:01
@Viv, thanks for the kind words. I had not planned on releasing the FULL source code for the example as I was planning on using it another project. I do know that someone else has re-created the same application for buoys up in San Francisco. The techniques I used are all pretty much covered in the Axiis examples and shouldn’t be too hard to figure out
8. December 2009 at 21:33
Thanks Tom, actually I was thinking to do this myself and was planning to blog about it.
I hope if I do it you will not mind!! Only thing that was scary was the chart part then I figured out that you already made it available in Axiis. By the way the background image – I guess it is a computer generated seabed and the coast line “out line”. What the technical term or what this image is called?
9. December 2009 at 10:20
Very nice! Especially for the Surfing aspect. I could see using this sort of data visualization in other areas as well managing performance of applications, etc.
Excellent stuff!
9. December 2009 at 13:36
@Viv, I would love if you did a public version and blogged about it, I think that would be great. I simply got the image from Google Maps and then used photoshop to trace the coast line.
10. December 2009 at 18:46
Hi Tom, do not say anything else about how excellent this example is – as you can see what people already said before me.
I am also thinking to work on your source code and create this example and definitely blog about it. I have kind of took a look at the code too.
In this complete example the time line does not reach all the way to the end of the area chart. Why is that? Also on the datatip chart you are showing the next 12 hours info. If the time line is pointing at a time where you do not have next 12 hours info what will happen. I guess may be that is why you finish time line simulation 12 hour prior the end time?
10. December 2009 at 18:48
sorry I meant “(I) do not want to say” not “do not say”
23. January 2010 at 18:48
Hi Tom, did you change the code recently? The arch shape looks a little different than what it looked last time.
25. January 2010 at 10:27
Actually I did change the code to grab the data live, thus the different arc shapes you were seeing. But upon your comment I realize this might be confusing to people who have read the post and saw the presentation, so I changed it back. You can now find the live code here though http://www.twgonzalez.com/demos/SanDiegoSwellLive/ the feed doesn’t always come across correctly so sometimes it will error out – but I don’t have control over the source feed.
12. February 2010 at 13:37
Hello, a little update: I have now posted my Reference List on Data Visualisation Sources on the net, with your blog near the top. Keep up the good work!