Project Proposal

Feedback Exercise

Post Mortem

Exploratory Data Analysis

The National Oceanic and Atmospheric Administration (NOAA) currently hosts a visualization, "Climate at a Glance," which allowed most of the early exploratory data analysis to be done. After most of the visualization had been implemented for this project, I used my own visualization to do additional exploration previously not possible in the NOAA visualization. In particular was looking at the histogram of the distributions of temperature anomalies for select geographic locations. I exported several subsets of the temperature anomaly data to Excel and used PivotTables and PivotCharts to group by month. Seeing interesting features in the monthly groups, I decided to add a heatmap and radial line chart to the visualization.

Design Review

Architecture

The key highlights about the software architecture I'd like to point out are:

• An extremely high code efficiency. I used a functional style instead of an object oriented style of programming, which allowed me to use roughly the same amount of code as the Homework 6 solution. A strong focus was also placed on self-documenting and readable code, with frequent refactorings after each new feature where common operations were lifted into helper functions allowing for high reuse.
• Few third party libraries. All CSS was homegrown, and only three third party JavScript libraries were used.
  • d3.js
  • topojson-client.js
  • netcdfjs.js (used to read array buffers for NetCDF assets)
• A responsive design. The visualization will fill any screen from a smartphone to ultrawide and 8K displays through the use of nested hierarchical flexboxes. Even print and dark color themes (e.g. dark mode in MacOS Mojave) are supported through the use of media queries in CSS.

Data wrangling

As discussed in the project proposal, the gridded temperature anomaly dataset is provided in the NetCDF v4 format. I found that converting to JSON or CSV not only degrades performance, but is entirely impractical as the file size balloons to 1–2 GB. This is not only impractical in terms of bandwidth, but also in terms of the user's RAM memory.

In order to overcome this hurdle, the gridded temperature anomaly dataset was loaded in its binary format as an array buffer in JavaScript before being passed to netcdfjs, which copies the data into JavaScript arrays. I had to be extremely careful when working with so much data, and developed a series of techniques that: maintains the binary IEEE machine representation of the temperature anomaly, and limits data movement.

Here's an overview of the techniques developed:

• Instead of storing JavaScript objects in the gridded temperature anomaly array, store only IEEE floats. For example, use NaN rather than undefined or null in order to maintain type consistency. Even though JavaScript is dynamically typed, the compiler is optimizing and will recognize when the array is of a single type.
• Instead of directly passing the temperature anomalies, pass indicies and offsets.
• Restrict access to the gridded temperature anomaly array to specialized getters. This has the added bonus of allowing interposition, such as unit conversion, to be easily added.

Using these techniques, loading and processing times were reduced from minutes to under 600 miliseconds. The browser's memory footprint was similarly reduced from 2–4 GB to 50 MB.

Two additional datasets were used in addition to the gridded temperature anomaly dataset:

• The monthly global average temperature anomaly dataset from the same source as the gridded temperature anomaly dataset. This dataset was formatted as ASCII and a custom parser was written to wrangle it.
• A stock topojson map of the world's landmasses from: https://github.com/topojson/world-atlas.

Controls

Allows the user to switch between Celsius and Fahrenheit using interposition discussed in Data wrangling.

The visualization will automatically detect whether the user is using a dark color theme (e.g. dark mode in MacOS Mojave) and will adapt its color theme accordingly. This can be overridden by the user. While implementing this feature, I found that some visualizations, the Radial charts for example, to be subjectively better in the dark theme than in the light theme. While I tried to picked the color scheme to be immune to this, I hypothesize that this phenomenon is due to brightness not being perceived linearly. For example, variations in darker colors may be perceived more strongly than variations in lighter colors.

Tooltips

While easily overlooked, and in contrast to the homework, I implemented tooltips to position itself directly over the highlighted element instead of following the mouse. I found that this made tooltips easier to read and reinforces which element the tooltips were referring to.

Linked views

All five views are linked and interactive.

Map

This feature was heavily discussed in the project proposal and feedback exercise, and I decided to implement both the map in both 2D and 3D. When the visualization is initialized, the positions containing the highest and lowest anomalies are selected, which helps answers the questions posed in the project objectives.

Allows the user to switch between 2D and 3D projections, reset to visualization to its initial state, hide/show the average dataset, and control which positions on the map are shown in the other views.

The user can drag to manipulate the orientation of the map, and click to add or remove selected positions.

Line chart

This feature was also discussed in the project proposal and answers questions regarding the temporal features in the dataset. I found that the data, especially over land and near the poles, to contain a lot more features than I initially anticipated. For that reason:

I added a month filter, allowing the user to focus on specific months in the dataset

and the ability to zoom into specific time periods. The user can either drag the time slider or click on the chart to change the time shown in the map. Instead of clipping the chart when it went off the viewport, I had it fade out emphasizing the chart extends beyond what is currently shown.

I embedded a bar chart in the tooltip to allow the user to compare temperature anomalies for different positions at a specific time. Position is encoded as the color of the text, and matches the map and other views. While the data is diverging, I had the bars run in the same direction in order to allow the user to compare the magnitude of the anomaly, with the color signifying the direction. The reason for this design decision is, for example, while it may be summer in the arctic, it's winter in the antarctic, and I wanted the user to be able to see if a positive anomaly in the arctic is of the same magnitude of a negative anomaly in the antarctic.

Tabbed data views

The next three views detail specific distributions in the data, each using a different encoding to emphasize a different feature. The user can switch between these views by clicking on the tab.

Most of these views were not a part of the original project proposal, but were added after observing interesting features in the map and line chart.

Data table

The first tab shows the data in the line chart. Taking inspiration from Taggle, a histogram is shown above the each of the column headers. Clicking on the column headers sorts the data, and this sort order is maintained as the other views are manipulated. Clicking on the rows changes the selected date in the map and line chart. In contrast to the bar chart in the line chart's tooltip, I used a diverging bar chart to emphasize the direction of the anomaly over time and not just magnitude at a specific point in time. The map, histogram, and diverging bar chart all use the same set of scales to allow for comparisons.

Heatmap

The second tab shows a heatmap of temperature anomalies for each position broken down by year and month. It uses the same color scale as the map, and emphasizes both monthly cycles and yearly trends. For example, anomalies near antarctica are greatest during winter (April through October) in addition to a gradual upward trend in its averages. The heatmap also shows gaps in the instrumental temperature record where data is not available, which shows the difficultly of acquiring measurements during certain times of the year.

Clicking on the heat map changes the selected date and month for the map and line chart.

Radial chart

The third tab shows a radial line chart for each position. It focuses exclusively on monthly trends, and is the most experimental feature in the visualization: known only to work correctly in Google Chrome on Windows.

For the brushed date range in the line chart, it loops a semi-transparent line around in a circle. Where the line overlaps, it darkens, which allows the user to quickly visualize the distribution of anomalies by month for a specific date range. Clicking on the chart changes the selected month in the line chart, which may result in updates being propagated to the map and data table.

I took several screenshots in Google Chrome on Windows for a position near the arctic, in the ocean near the equator, and in the antarctic—to emphasize how anomalies tend to be greatest when: over land, near the poles, and during winter. The antarctic radial line chart is fainter in general because less data is available near antarctica.

Metadata

The NetCDF format is self-describing, and the last section in the visualization prints out its metadata. For example: how the baseline is calculated, measurement techniques, and references to journal papers detailing the metholodgy of how the dataset was assembled.

Tell me a story

There isn't one story to be told in the NOAA Merged Land Ocean Global Surface Temperature Analysis (NOAAGlobalTemp) V5 dataset, and I didn't want this visualization to be the end, but the beginning of further analysis. For this reason, I designed the visualization to be a tool used by experts to explore and export interesting features in the instrumental temperature record.

For example, the user can copy or download the the data table in CSV for their own analysis and presentation

in addition to serializing the DOM and exporting an SVG of the map or line chart.

While exploring the data, here are some interesting features I observed in the data.

The story of Global Warming

Global warming is the increase in the average near surface temperature, and becomes most apparent when looking solely at the average temperature anomalies. The World Meterological Organization (WMO) recommends a 30 year baseline period to distinguish between weather and climate, and this can shown by shifting a 30 year wide brush in the line chart and observing the changes in the data table histogram.

The story of the diverging effect of snow

Snow changes surface albedo, that is the amount of solar energy reflected back into space. As snow falls, surface albedo increases, which drives further cooling as more energy is reflected back into space, which lowers temperature and drives more snow fall. Likewise, as snow melts, surface albedo decreases, which drives further warming as more energy is absorbed, which raises temperatures and causes more snow to melt. This diverging effect creates a situation where the distribution of surface temperature during winter widens to the point where the temperature anomalies become bimodal. This can be shown in the tabbed data views when tweaking the filters.

The story of land vs oceanic anomalies

Large bodies of water have a strong stabilizing effect on temperature.

The story of the influence of latitude on anomalies

Temperature anomalies tend to be larger near the poles.

The story of taking measurements near Palmer's peninsula

Despite the poles having interesting variations in temperature anomalies, measurements are harder to take. The sensors near palmer's peninsula is a good example of this with year-round measurements ending in 1995.