Data Visualization Methods for Transportation Agencies (2017)

Below is the uncorrected machine-read text of this chapter, intended to provide our own search engines and external engines with highly rich, chapter-representative searchable text of each book. Because it is UNCORRECTED material, please consider the following text as a useful but insufficient proxy for the authoritative book pages.

32 Establishing and adhering to style standards is essential to maintaining a consistent brand image. This section covers recommendations for key elements such as color, font, and responsiveness. We include guidelines on a number of Federal requirements to address whenever you are producing visuals for print or web. 4.1 · Basic Design Principles There are some basic concepts to keep in mind for all designs:  Keep it simple: Visualizations should convey only the essential elements of the concept, keep text to a minimum, and be easily understood;  Make it clear: To help guide the eye, establish anchors in the visual. Choose fonts that are easy to read. Choose a readable font size and increase it for key statements to make them stand out. Use overlays to continue building on a visual and create emphasis through differentiation of format (e.g., position, color, shape, size, and existence as described in 3.4) and font; and  Be consistent: Once you decide on a style (color scheme, fonts, etc.) stick with it. The audience will know what to expect and will not be distracted by changes in the look of your visualizations. 4.2 · Font When making font choices, focus on readability and suitability. To be readable, align your text for comfortable spacing between words and choose a font that is appropriate for its intended purpose. To be suitable, consider the design intent of the typeface (font). If it was intended for a sign, do not use it to annotate paragraphs. Be aware of the suitability of serif and sans serif fonts. (https://www.fonts.com/content/learning/fontology/level-4/fine- typography/legibility) Best Practices  Capitalization: A mixture of upper and lower case letters is easier to read quickly and accurately, compared with text in all upper case, and takes up less valuable space on the visualization. Be mindful that using more than seven consecutive upper case words will force the audience to reread that section. When all words have equal weight, your audience will have difficulty prioritizing their importance.  Size: When your font is too small, it is difficult to read. When your font is too large, it limits the number of words you can fit in the same amount of space. According to BootstrapBay (https://bootstrapbay.com/blog/web- typography-best-practices/), 38 pixels is the average headline size, but 20- to-32-point fonts are most frequent for headlines for web typography. For web body copy, size 14-to-16-point fonts are most common.  Responsiveness: When producing web copy, consider that people access it from many screen types. A font appears differently on a smartphone screen compared with a tablet, which is different from your laptop, or your desktop. Choose a responsive typography so it scales to fit the size of each user’s browser. 4.3 · Color “Color creates emotion, triggers memory, and gives sensation” – Gael Towey, Creative Director, Martha Stewart Living Vocabulary Choosing the appropriate color that looks attractive and differentiates dimensions of your visualization is critical. Color Wheel Artist describes the color vocabulary (http://color-wheel-artist.com/hue.html)

33  Color/Hue: The twelve purest and brightest colors, including the three primary colors (red, blue, yellow), three secondary colors (violet, green, orange), and six tertiary colors (blue-violet, red-violet, yellow-green, blue- green, yellow-orange, red-orange);  Tint: The lightened version of any color, also known as pastel, created by adding white. Tints can range from slightly lighter than the hue to almost white;  Shade: The darkened version of any color, created by adding black. Shades can range from barely darker than the hue to almost black; and  Tone: The grayed version of any color, created by adding both white and black. Tones typically are considered more appealing color combinations than simple tints or shades. Palette When creating visualizations, you need to determine a color palette that can be used consistently throughout the design. The palette can be monochromatic (using only one color), black and white, full color, or neutral. Color palettes for visualizations typically comprise a primary palette and secondary palette. The primary palette includes the colors that are used most frequently, while the secondary palette provides additional complementary colors that can be used as needed throughout the design. The secondary palette colors often are bright, as they are intended to be accents. Google has created a helpful online video demonstrating that within the selected primary palette alone, there are various options for regard tints and shades of the hue, before incorporating secondary palette accents: https://design.google.com/videos/palette-perfect/ Scheme Color schemes are informed by color palette. Depending on the selected color palette, the color scheme will include the tints, shades, and tones of the primary colors and the accent colors used in all designs. When selecting a color scheme, it is important to consider color insensitivity and color blindness. When using reds and greens together, choose highly saturated, darker shades rather that light tints, and use thicker lines. Color blindness is fairly common and falls across a wide spectrum; it can be helpful to identify a few people in your workplace with color blindness who can help to test your materials. Also consider how easily distinguishable the various tints, shades, and tones are from one another within the same hue family, as strong visuals use color to clearly demarcate separate pieces. There are many resources on color theory that define good color combinations to choose for your scheme. If you aren’t sure where to get started, see Pantone for excellent advice: https://www.pantone.com/pages/MYP_myPantone/mypantone.aspx When choosing a color scheme to represent continuous data (e.g., in a heat map), it is best to avoid using the colors of the rainbow:  There is no “greater than” and “less than” order to colors the way there is with light to dark.  It is difficult to spot differences: Human eyes are not good at detecting color differences. This makes it difficult to spot differences among dimensions. Contrast When choosing colors for text and background, contrast is key. If you plan to stray from black text on a white background, you should consider the transparency/opacity of your text. Transparency indicates how easy it is to see through the color; opacity indicates how difficult it is to see through the color. Light text on a dark background typically requires a higher level of opacity than dark text on a light background. Brightness is another factor to consider. Our eyes find it easiest to read text that is different in terms of color and in brightness from the selected background. Choosing contrasting colors, such as colors on the opposite side of the color wheel, helps to ensure legibility. For example, dark violet text does not work well against a blue background, but it reads well against yellow (particularly light yellow) There are online color contrast checkers that can help you verify whether you have chosen colors with ample contrast ratios, e.g., WebAIM: http://webaim.org/resources/contrastchecker/

34 4.4 · Federal Requirements for Style Under Section 508, the federal government outlines a number of standards to guarantee equal access to information conveyed electronically for those with or without disabilities. All your visualizations developed, procured or maintained by federal departments and agencies must comply with the standards. To familiarize yourself with these standards, use these resources: https://www.fcc.gov/general/section-508-information http://www.fhwa.dot.gov/publications/research/general/03074/index.cfm Technical Standards  Provide a text equivalent for every non-text element (e.g., via “alt”, “longdesc,” or element content);  Synchronize equivalent alternatives for any multimedia presentation;  Design webpages so all information conveyed in color also is available without color, as in context or markup;  Organize all documents to be readable without associated style sheets;  Provide redundant links for each active region of a server-side image map;  Provide client-side image maps rather than server-side image maps, except where regions cannot be defined with an available geometric shape;  Identify both row and column headers in data tables;  Use markup to associate data cells and header cells for data tables that have two or more logical levels of row or column headers;  Title frames with text that facilitates frame identification and navigation;  In the instance that compliance cannot be accomplished in another way, provide a text-only page, with equivalent information/functionality, to ensure your website complies with stated requirements. Update the text-only page each time the primary page changes;  For pages using scripting languages to display content or create interface elements, identify all information provided by the script with functional text that assistive technology can read;  When a webpage requires an applet, plug-in, or other application to interpret page content, include a link to a plug-in or applet that complies with §1194.21 (a) through (l);  Create electronic forms completed online to allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues; and  Provide a method to allow users to skip repetitive navigation links. Formatting Documents  Figure captions must describe the chart in the caption title, as in Figure 22. Figure 21: Labor Division by Income Level (Cambridge Systematics) 0 1 2 3 4 5 6 Clerk Designer Artist CEO Labor Division by Income Low Income Medium Income High Income

35  Equations and formulas should be presented as images (not as text or in a text box) and inserted into the document. Not all computers, printers, and operating systems can interpret special math and scientific symbols and fonts. Number and caption each equation as a figure, as shown in Figure 23: Figure 22: Example of a Formatted Equation (Cambridge Systematics)  Alt text and table summaries must be clean. Clean alt text/summaries for Figures/Tables/Equations. Where needed, break into long descriptions (the HTML Validato [https://validator.w3.org/] suggests a maximum of 75 characters; others suggest 100). When cleaning, make no references to color, remove special characters if they’re not necessary (though they are allowed), and spell out acronyms in summaries and alt text. Image Requirements The Section 508 requirements specifically for images include:  Image weights are less than 30 K (when possible without making illegible);  Image widths are less than 420 pixels (when possible without making illegible);  Save all files as fig[section#][figure# in section] (i.e. “fig41.jpg”), using all lowercase letters; and  File names should never exceed 20 characters or contain dashes, special characters, or spaces (only underscores).