Online Resources to the Paper:Building an Integrated U.S. National Climate Indicators System

Online Resource 3: Recommended National Climate Indicators System Graphic Style Guidance

Ainsley Lloyd1, Caroline Dougherty2, Karin Rogers2, Ian Johnson2, Jim Fox2, Anthony C. Janetos3, and Melissa A. Kenney1

Affiliations 1University of Maryland, Earth System Science Interdisciplinary Center / Cooperative Institute for Climate and Satellites-Maryland, 5825 University Research Court, Suite 4001, College Park, MD 20740-3823, USA2University of North Carolina-Asheville, National Environmental Modeling and Analysis Center, CPO 2345, One University Heights, Asheville, NC 288043Boston University, The Frederick S. Pardee Center for the Study of the Longer-Range Future, 67 Bay State Road, Boston, MA 02215, USA

Corresponding author: Melissa A. Kenney, University of Maryland, Earth System Science Interdisciplinary Center / Cooperative Institute for Climate and Satellites-Maryland, 5825 University Research Court, Suite 4001, College Park, MD 20740-3823, USA; kenney@umd.edu; phone: 301-405-3226; fax: 301-405-8468

This article is part of a Special Issue on “The National Climate Assessment: Innovations in Science and Engagement” edited by Katharine L. Jacobs, Susanne Moser, and James L. Buizer

OR1 Recommended pilot indicator features

The basic required features for a pilot indicator included an indicator graphic, text description, metadata, and attribution to the agencies or organizations that developed the data or created indicator visualizations.

OR1.1 Indicator graphics

We surveyed the academic and practitioner literature to understand the best practices in scientific data visualization. Informed in particular by Cairo, 2013; Ware, 2012; Tufte and Graves-Morris, 1983; and Yau, 2013, the Indicators Research Team developed visual guidance to create an attractive and consistent look-and-feel and to improve interpretability within and between indicators by different audiences (see Sections OR2-5).  For example, colors are selected to reinforce the interpretation of the indicator, text “helpers” are used on the y-axis to provide cues to explain the status or trend, and time scale is defined on the x-axis so that it is clear when the graphic is updated with new data. Additionally, when used, a definition of the baseline or anomaly period is included on the graphic, which is either the 20 th century average or the entire period of record. The future development of interactive, customizable graphics was also recommended.

OR1.2 Supporting text

The supporting text descriptions for each indicator graphic were planned to be consistent with NCA3 and across indicators. For each indicator, there are three short key points – What is the indicator?; What is its status or trend?; and Why is it useful? – and a summary that provides additional detail. The recommended parallel structure was intended to make it easy for a user to look at multiple indicators and understand the information.  

OR1.3 Metadata

One of the recommended NCIS goals was to provide access to data and methods so that a user has the analytical tools to derive indicators in support of their decisions. For an indicator, the recommended minimum metadata included:

contributors (i.e., data provider organization and human point of contacts), dataset(s), activity (i.e., calculations, transformations, or analysis conducted on the dataset(s) to create the

information needed to create the indicator image), and references for the indicator or underlying science behind the indicator.

The recommendation to include metadata fit clearly with USGCRP’s development of the Global Change Information System (GCIS; USGCRP 2014), an open-source, web-based resource for traceable, sound global change data, information, and products. The delivery of NCA3 marked a new way of providing transparency, documenting metadata, and improving user access via GCIS. Including indicators metadata in the system was recommended to allow better integration and use of Federal information products as well as to help guide users to supporting information and assessments, reports, and tools produced by the USGCRP. Over time, use of GCIS could promote greater consistency among agency indicator products and make it significantly easier to combine and re-use indicator information.

OR2 Color Palette

Colors are selected for graphics to emphasize the most important message from the data, or the “take-home message.” The colors should show an intuitive selection that users are familiar with from their natural environment. For example, blue may be selected to indicate a colder temperature, while red may

2

be selected to show a warmer temperature. Similarly, green is often shown to indicate vegetation, while blue is chosen to indicate water.

Guidelines:

Colors should be assembled within a graphic so that if printed or shown in grayscale, the meaning of the graphic is not lost.

If a graphic requires more than two colors, consideration should be taken that they complement each other and provide adequate contrast. For example, a lighter color (blue, green, etc.) should be paired with the darker version (dark blue, dark green, etc.)

The standard color palette has been selected to be colorblind-friendly.

3

OR3 Typography

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

Developed by Christian RobertsonUsed under Apache License, version 2.0 through Google Fonts

4

OR4 Graph Details

To best communicate information, these guidelines should be followed:

If the graphic shows discrete data, the data units should be expressed with either a line-dot graph or a bar graph. Bar graphs are ideal for shorter time-series graphics so that it doesn’t give the illusion of being a continuous dataset. Line-dot graphs should be used for longer time-series graphics, e.g. data for the 20th century.

If an image is used in conjunction with a bar or line-dot graph, the image is placed to the right of the graphic. This placement is ideal for visual tracking and the tendency of the user to read from left to right.

OR4.1 Label Conventions

In order to communicate with the U.S. public, units chosen for each graphic should use English measurements, rather than metric units.

The title of the graphic must indicate the temporal scale of the dataset (seasonal, annual, etc.) and the spatial scale (county, contiguous United States, global, etc.). If the dataset is for the lower 48 states it should be written “Contiguous United States.” United States should be spelled out and not abbreviated.

If a graphic shows a temporal scale, time should be on the x-axis. The x-axis can use a 5-,10- or 20-year time increment and should always show the start and end date of the data set. The x-axis does not require a title if it is a temporal scale.

The y-axis specifies the data title, and its units should appear in brackets below. If the data indicates an anomaly, this should be spelled out in the data title as “difference from the 20th century average.” When possible, show data anomalies using the 20th century average (1901-2000).

The legend should be placed in the upper left corner of the graphic when possible. The legend should spell out the full data name and not use acronyms. Only the first word of the data name should be capitalized.

Acronyms are only used with chemical compounds or if the acronym has been explicitly spelled out in the title of the graphic.

OR4.2 Software

All graphics are developed in SigmaPlot 12.0 software. Occasionally, SigmaPlot may not provide some of the stylistic requirements needed for the graphics, some post-processing is required in Adobe Photoshop. Examples of this post-processing include modifying the x-axis to include a start and end date or the inclusion of an explanatory image.

Maps are typically made using ESRI’s ArcMap software. These may be post-processed using Adobe Photoshop. Examples include moving and placement of legends or additional information.

5

OR4.3 Graph Details

6

OR4.4 Map Details

7

OR5 Dynamic Graphics

OR5.1 Animated Maps

Tools used: ArcMap, After Effects, Photoshop

An animated map typically displays the progression of something over time. The process involved in generating an animated map is as follows:

A series of individual maps is exported from ArcMap. The maps should display the same extent and wayfinding features, but each will display different data such as an the extent of a disease or area of sea ice for a particular time period.

These individual maps are combined in After Effects as animation frames. Additional elements beyond the map itself may be animated in After Effects such as a trendline that draws along a graph in the animated composition. From After Effects, this animation is exported as a PNG sequence.

The PNG sequence is imported to Photoshop and is then exported as an animated GIF. After Effects cannot export an animated GIF natively and so Photoshop is required to perform this conversion.

This animated GIF can then be embedded in a web document as other images are.

OR5.2 Interactive Maps

Tools used: ArcMap, SigmaPlot, QGIS with SimpleSVG plugin, text editor

The interactive map is essentially one flat map with hoverable regions that can trigger an action elsewhere on the page. The elements are structured as follows:

classList.js This is a utility polyfill that enables functionality in older browsers that exist in newer browsers.

graph.js This is the core code that enables the interactions between the selectable regions of the map to trigger events on the page.

graphs/ This directory is the collection of all graph images that correspond to the hovered regions. These will appear when a corresponding region is hovered.

index.html This is the main HTML file that brings all the elements together. This file contains several elements in one place:

o Styles that drive layout and coloring for the elementso The SVG that is generated from the QGIS plugin SimpleSVG. This plugin takes ESRI

Shapefiles and exports SVG that can be embedded into HTML. Each element needs to be associated with the graph it corresponds to by providing a relative link in the “data-graph” tag attribute. This SVG has no concept of its placement relative to the shapes on the underlying flat map and so the #coastal_svg CSS needs to be tweaked until the shapes line up.

map.jpg This is the main underlying flat map that the selectable regions will lay on top of.All of the code and elements are in plain HTML/CSS/JS/SVG and are therefore all readily modifiable by someone with access to the source code and an understanding of these technologies.

8

References

Cairo, Alberto. (2013) The Functional Art: An introduction to information graphics and visualization. New Riders. pp. 363

Global Change Information System. http://data.globalchange.gov/ Accessed March 3, 2014

Tufte, Edward R., and P. R. Graves-Morris. (1983) The visual display of quantitative information. Vol. 2. No. 9. Cheshire, CT: Graphics press.

Ware, Colin. (2013) Information visualization: perception for design. 3rd Edition. Elsevier. pp. 536.

Yau, Nathan. (2013) Data points: visualization that means something. John Wiley & Sons.

9