a3-HvanTol-MWeirath

Team Members

1. Michelle Weirathmueller (michw)
2. Helena van Tol (hmvantol)

Interactive World Ocean Atlas

For this project, we developed an interactive visualization using data from the World Ocean Atlas 2013. We show two main panels: one is a global map of surface temperature or salinity (the user can choose which one they'd like to view). Clicking on the map brings up the temperature and salinity profiles corresponding to that location in the other panel.

Running Instructions

Access our visualization at http://cse512-16s.github.io/a3-michellejw-hmvantol/ or download this repository and run python -m SimpleHTTPServer 9000 and access this from http://localhost:9000/.

If you don't see the map at first, expand your browser window width until the two diagrams are side-by-side.

Story Board

Data domain

Since we are both Oceanography graduate students, we decided to use an ocean-related dataset: the World Ocean Atlas 2013 (WOA 2013). There are a number of simple variables that are often used by oceanographers to study the movements of different water masses. Some of those variables include temperature, salinity, and dissolved oxygen. The datasets provided through the WOA website are available as gridded files for each type of measurement. At each gridded location, the files contain a measurement "profile", which is a series of values interpolated to pre-defined depth bins. Oceanographers often look at measurements as a function of depth to understand the vertical stratification throughout the water column at a particular location. We used one-degree gridded annual temperature and salinity, averaged between 1955-2012, for the map colour. For the depth profile, we used five-degree grids. It could be interesting in the future to implement a time slider into our visualization.

Interaction techniques

Oceanographers regularly explore large multi-variable data sets in 4D space (longitude, latitude, depth, time). Common visualizations include contour maps, depth profiles, and T-S diagrams. On research cruises, oceanographers will interact with data as it is being collected to make decisions about where to sample along the cruise track and at which depths. Data exploration could be supported by linking multiple commonly used visualizations, allowing the user to observe multiple dimensions at once.

Brainstorming

Here is our first sketch of the visualization:

We envision a colour map of sea surface temperature that the viewer can click to bring up depth profiles from different locations. This is a sketch of the type of colour map we are envisioning (though for now, note that coordinates are not labeled correctly and the default image color map could probably be better).

We brainstormed several other versions of this visualization, but eventually decided to go with our first idea because it seems more intuitive.

In this version, the viewer can click on the map to bring up a depth profile or click on a depth in the profile to change the depth visualized on the map.

This one is similar to the previous idea, but the depth profile shows an entire latitude or longitude range.

In this sketch, the depth profile hovers next to the mouse icon and changes depending on the map location.

In this visualization we linked a T-S diagram to a depth profile to show the interaction between temperature and salinity rather than a map. The user could use brushing to highlight different regions of the T-S diagram or the depth profile.

Changes between Storyboard and the Final Implementation

After going to office hours, we learned that D3 doesn't really interpolate colours on a map. We would have to use another javascript library like leaflet.js to make this sort of map. Instead, Michael came up with an idea where we could generate the base map in python and then overlay interactive rectangles on top of the background to make the map interactive.

Originally we were only going to map one variable. After creating the visualization for temperature we decided to add salinity to make things more interesting. The user can toggle between two different surface maps for temperature and salinity and can visualize both salinity and temperature lines on the depth profile.

We made longitude and latitude appear upon hovering over the map to help the user find and remember specific locations.

After the lecture on colour, we moved away from the rainbow palette and used an XXXXXXX palette instead. This palette is better because _________________________________.

Originally, the plan was to keep all the axes constant to make the different profiles easily comparable. However, the salinity values had a really wide range and included some pretty low values in only a few locations. This broad salinity axis prevented the viewer from seeing the changes in the shape of the salinity profile, so we adjusted the salinity axis for each location.

Development Process

To start, Helena created the depth profile while Michelle created the map. After the two visualization were merged we both worked on the interactive components linking the two plots together.

Include:

• Breakdown of how the work was split among the group members.
• A commentary on the development process, including answers to the following questions:
  • Roughly how much time did you spend developing your application?
  • What aspects took the most time?