Chris Choi, Marisa Yamasaki, Max Glass, Ollin Boer Bohan

Design Rationale

Add: A rationale for your design decisions. How did you choose your particular visual encodings and interaction techniques? What alternatives did you consider and how did you arrive at your ultimate choices?

With this visualization, we intended to convey the relationship between environmental policies and statistics -- such as international agreements and renewable energy usage -- and measured pollution. Our visualization allows users to explore correlations between various combinations of policies and pollutants, helping them draw conclusions about how certain policies impacted the environment. We also provide a display of pollutant output over time, both through viewing a specific date and through a continuous time lapse display.

To do so, we use the following visual encodings and interaction techniques:

Encodings

• Color Saturation: We choose to use color saturation to encode pollutant level. The saturation of each area is directly related to amount of pollutants reported for that area. We chose to fill the entire area with color, rather than using a colored dot, to emphasize the geographic relationship between regions. While color saturation is only moderately ranked for representing a quantitative measurement, the simplicity of saturation comparison allows viewers to quickly see patterns in the map. To compensate for the inexactness of color comparison, we added a tooltip function to provide numerical pollution levels. We chose a red hue as our base color to convey a negative connotation, and we consulted the color name distance study to make sure that our colors were distinguishable.
• Texture: We choose to use texture to encode whether there exists data for a region. Adding a grey pattern to regions with no available data conveys lack of data without appearing too similar to the pollution encoding channel color.
• Containment: We choose to use containment to encode participation in an environmental policy. Borders around participating nations conveyed participation without disturbing the color encoding of pollution levels. Since only one policy is displayed on the map at a time, we only required one outline color. As an outline is either present or absent, containment was ideal for encoding a Boolean variable. We chose a green hue for boundary color to clearly distinguish it from pollutant level. We checked our color palette using an online color blindness simulator to ensure that our chosen red and green hues would be distinguishable for a colorblind individual.
• Position: We choose to use position to encode time by adding a time slider along the top of the map. Position is the most highly ranked channel for encoding an ordinal variable, and the horizontal orientation indicates the passage of time when the time lapse is played.
• Position: We choose to use position to encode country name by displaying all countries on a map. A map interface is familiar and easily navigable for users.

Interaction Techniques

• Selection: We choose to use both mouse hover and tap methods of selection. Hovering over a nation with data on the map causes a tooltip pop-up box to appear detailing the exact value of pollutant emissions for that nation. We chose to use hovering for this function to avoid cluttering the display with unwanted statistics, while enabling the user to quickly view more detail. Using a tool tip allowed us to separate hovering for detail from clicking, which we use for a different function. Interacting by double clicking on a country zooms in and allows the user to explore in greater detail. Double clicking therefore only alters the display, and is not involved with encoding data.
• Data and View Specification: We chose to use filtering to display specific data fields on the map. One implementation of filtering is through our time slider, which allows the user to filter by year. We chose to make the time variable interactive through a slider to emphasize the ordinal and continuous nature of time. The interactive slider doubles as a play/pause button, updating the time filter continuously to better convey change over time.
  We also used filtering to enable the user to select independent and dependent data fields to display. We maintained a minimalistic display by nesting policies under heading categories and displaying impacts in a scrollable top bar, avoiding cluttering the page. Filtering is applied when a user clicks on a data field, which is then highlighted to show which data is being displayed.

Some variatiations we considered (and our reasons for rejecting them) are as follows:

• Area Encoding: We chose to reject using area to encode pollutant level because we wanted to preserve the geographic orientation of the countries. Maintaining the proximity and orientation of countries allows the user to notice trends across larger regions. We also noted that a country's size might impact the effect of its pollutants on the world, so we wanted to preserve this relationship.
• Detail Filtering: We chose to reject using a filter to display more detail. Our prototype supports double-clicking on a region by zooming the display so the region fills the screen. Initially, we considered displaying pollution data for the sub-regions within a region, allowing a user to view more details by clicking. We ultimately rejected this interaction technique because our data was not extensive enough to support a detailed view for all nations.

Development Process

Add: An overview of your development process. Describe how the work was split among the team members. Include a commentary on the development process, including answers to the following questions: Roughly how much time did you spend developing your application (in people-hours)? What aspects took the most time?

Primary roles for the development of this project were as follows:

• Chris Choi: Coordinator
• Marisa Yamasaki: UX Lead + Primary Writer
• Max Glass: Data Lead
• Ollin Boer Bohan: Tech Lead

We met three times as a full team during the project, in addition to corresponding over Slack and holding one-on-one meetings. During our first meeting, we decided which dataset to use and chose team roles. During our second meeting, we created a basic plan of which encoding channels and interaction techniques to use for our display. At the third meeting, we presented a static digital mockup of the prototype layout and came to a consensus on the positioning of headers, legends, and variables. When not meeting together, we completed individual work according to our team roles, including searching for additional data sources, data wrangling, layout development, color palette analysis, and programming.

We spent somewhere between 25 (known minimum) and 60 (potential maximum) hours in total. The most time-consuming aspects were data collection/formatting and debugging JavaScript.