Data Visualization Style Guide: Office of HIV/AIDS

DATA VISUALIZATION STYLE GUIDE Office of HIV/AIDS

02

INTRODUCTION Welcome to USAID’s Office of HIV/AIDS (OHA) data visualization style guide.

The purpose of this product is to provide OHA a set of guide rails on how to present data in-line with an overall vision so that all OHA data visualizations have a common look and feel. OHA produced visualizations do not need to all be identical, but they should appear as if they belong to the same family. This common appearance is achieved through the use of a set of elements belonging to an organization’s graphical style. For example, by using the same typeface, size, color schemes, graphical elements, annotation patterns, and placement options, different users can create graphics grounded in a base style, while still allowing for creative flexibility. Think of organizations like FiveThirtyEight, Financial Times or BBC which have such distinctive styles that even on their own in the wild, you can clearly identify their origin.

Creating a consistent look and feel for graphics has at least three organizational benefits. First, product creators can spend more time focusing on graphical content and messaging as the style elements are pre-defined for them. Second, a regular consumer of OHA’s analytic products will be able to more easily read and interpret the graphical content based on familiarity of its preset guidelines.

Finally, product consumers will come to recognize OHA graphical products based on their style and may place more trustworthiness in them due to their familiarity with the product. At the end of the day, we want to create and disseminate visualizations that are consistent, trustworthy, and identifiable as belonging to OHA.

WHY A STYLE GUIDE The motivation for creating this style guide comes from an assessment of the office’s FY20Q1 review presentation. The study documented that over 150 different colors were used for encoding data or annotations in visualizations

contained in the review. The result not only is a set of graphics that lack a standard look and forces a user to reorient themselves each time, but also a brand that is unmemorable, unrecognizable and, potentially, not as trusted as a more polished product would be.

This style guide serves as a tool to define and enhance brand cohesion. It is designed to save you and your OHA colleagues time in the long run by reducing the number of decisions you make about chart size, graphical elements, which font, font sizes etc. This style guide is meant to provide clear recommendations on nearly every aspect of data visualizations. The guide can also help improve your data visualization skills as the recommendations contained within are built on the foundation of tested visualization principles. Lastly, a cohesive look for all our charts will improve our professionalism and help communicate messages to stakeholders more effectively.

HOW TO USE This guide should not be viewed as a software specific tool that will tell you how to create visualizations, but rather a tool that lays out the foundational elements of the OHA brand. There are definitely things that you should and should not do when creating a visualization. But, because of the diversity of products used/ created across the office, from exploratory to static communication pieces, there is no one size fits all solution to data visualization creation. Instead, this document is simply a guide complete with examples that are to be emulated.

The chart types presented herein are not meant to be exhaustive. They are put forth to illustrate a stylistic approach that is consistent, identifiable and built on industry best practices. A situation may call for the use of a bee-swarm diagram or bump chart. Our hope is that this guide provides you the stylistic rationale that is to be applied to these types of visualizations and beyond.

Aaron Chafetz Tim Essam

03

CHART ELEMENTS Before diving into colors and stylistic decisions, its important to lay out the standard graphical terminology as it relates to data visualization. The default visual size should be 5.625” x 10” to fit the dimensions of a 16:9 PowerPoint slide.

Title

Convey the takeaway message you want the audience to come away with. Avoid descriptive titles, focusing instead on takeaway points. Should be written in all upper case letters.

Subtitle

Provides additional contextual information not covered in the title. Smaller in size, not bolded or italicized, and may be a lighter color than the title.

TITLE Subtitle

1,000

The title and subtitle should be left aligned and align with the y-axis

250

Gridlines, when incorporated, should be a faint gray, not attracting attention away from the focal parts of the visual

An annotation for a data point. This is an outlier.

0

Annotations are a thin stroke, not boxed. And should be complete sentences. Add context to a data point.

Use swoopy arrows to connect annotation to data.

Bar charts must start at zero, whereas this is not necessary for other chart types

FY50Q1

Data source and any notes should be included in the lower right hand corner

FY50Q2

FY50Q3

Axis text should always be horizontal to make them easier to read

04

Axis/Grid

Thin and dark in appearance so as not to detract attention from the information in the visual. Text should always, always, always be horizontal as opposed to vertical or at a 45 degree angle. Values use a comma separator and limit the use of decimal places. If directly labeling all values on the chart elements remove axis text. Axis ticks detract more than they add to the visual and should be removed.

Labels should be used sparingly and should be added only when it’s unclear what the values are.

Provides contextual information beyond the values stored in the graph. Draws the reader’s eye to important information, such as highlighting outliers, important countries/partners, and helps tell a story about the data. Annotations include direct labels of data elements and longer comments about the context or data.

Instead of directly labeling every point or column, labels should only highlight the important elements of the visual. Contextual annotation is highly encouraged and should be written in thin and light typeface so as not overpower or detract from the data in the visual. Avoid boxes around annotations.

750

500

Mapping between colors/sizes and values used in a graph. Where possible, incorporate into direct labeling, e.g. adding the label to the end of a line, or graph title/subtitle, e.g. coloring the elements in the title the same color the category.

Annotation

The graph title should be in all caps and provide the takeaway message for the audience. The subtitle can provide additional context, including axis labels, period, or an integrated legend

Numbers should include thousand separator

Legend

FY50Q4 data source

Caption

Footer text containing the data source and notes or caveats about the data, providing information critical for integrity and transparency. Located in the lower right hand corner of the visual, a light shade of gray.

With the terminology in mind and some basic stylistic choices, the next few pages will lay out OHA’s chart principles, which present best practices and should be emulated to whenever possible.

Subtitles convey additional information not contained in the title. These are typically written as a full sentence describing what is going on or providing additional context. They can also house an axis title or integrated legend.

BETTER

Subtitle adds context

TESTING ACHIEVEMENT BY PARTNER

LOW VIRAL LOAD COVERAGE FOR LEO

BETTER

All plots should have purpose and/or answer a question, which should be conveyed in the title. This emphasizes the takeaway message for the audience.

Clearly state the main point of the graph and resist purely descriptive titles (e.g.

“NUMBER OF TESTS BY QUARTER”)

PARTNERS WORKING IN THE REMOTE NORTH ARE FALLING BEHIND ON THEIR TARGETS TWO QUARTERS INTO THE YEAR

LOW VIRAL LOAD COVERAGE FOR LEO

SCALE UP OF INDEX TESTING

15k

15k

10 5 0

Jupiter | Total Index Tests

2048

10 5 0

2049

2048

2050

Annotations provide clarifying details

2049

2050

BETTER

cyclone

NOT IDEAL

Annotations give explanatory information directly within the visualization to provide the audience with context not found in the numbers or title. Avoid boxing in a region of that graph that is important -- instead use color encoding to highlight important areas (events or periods of time) combined with annotation. Thin, gray arrows are good to pair with annotations; avoid thick red boxes/arrows as these detract from the overall visual hierarchy.

Lab access limited Leo’s ability to provide VLC to patients on treatment in early FY50

Scale up of Index Testing

JUPITER Index tests

Using the same font across visualizations will convey uniformity and care put into the work. OHA uses Source Sans Pro as the primary typeface. Arial or Gill Sans are alternatives if Source Sans Pro is not available. Text sizing, not just typeface, should be used consistently for each plot element to convey hierarchy and importance.

NOT IDEAL

Consistent typeface and sizing

BETTER

Title conveys takeaway message

NOT IDEAL

TEXT

NOT IDEAL

CHART PRINCIPLES

bridge washed out limiting access

05

Integrated or directly labeled legends

Legend <3 MMD +3 MMD

Category labels abbreviated where needed

Serpens

CPR

Leo

BETTER

Capricornus

NOT IDEAL

Avoid clutter or taking up ample space by abbreviating labels. Not every data point or bar needs to be labeled, but for those that are, think about abbreviated labels that are still informative. For example, abbreviating the Democratic Republic of the Congo to DRC. Abbreviations should be known by the audience. For example, using the country’s 3-letter ISO code can take up significantly less space, but may confuse your audience (e.g. DRC’s ISO code is COD and South Africa’s is ZAF).

Ophiuchus

+3 MMD

BETTER

<3 MMD

NOT IDEAL

Legends take up valuable real estate and make the audience work to flip between the legend and the plot. A better practice is to label elements directly or to integrate your legend into your title where appropriate. This structure is similar with axis text. You can directly label your bars. If you do so, you should remove your axis text when direct labels are used.

SRP

OCH

Clean numbers

06

19025101

31083149

31.1m

BETTER

31402925

NOT IDEAL

Round numbers to minimize clutter and avoid false precision, e.g. “positivity is 2.0832%”. Commas for thousands/millions separator should always be added to make numbers more legible to the reader. If you need precise numbers, consider using a well-formatted table.

19.1m

LEO

LINES

Neptune Saturn Jupiter Neptune

BETTER

Avoid clutter that distracts from your visualization by removing tick marks and unneeded lines, maximizing the data-ink ratio as Edward Tufte (2001) would say.

Borders and thick lines draw the audience attention away from the data encoded lines or bars. This also includes annotation boxes and thick arrow lines, which add more clutter than actual value.

NOT IDEAL

Plot is void of borders and thick or unnecessary lines

Jupiter

Saturn

NOT IDEAL

BETTER BETTER

Dual axes are difficult for a reader to interpret. “The scales of dual axis charts are arbitrary and can therefore (deliberately) mislead readers about the relationship between the two data series” (Rost 2018). Consider better alternatives such as using two side by side graphs or incorporating one data series into axis text, as these will be easier for the audience to interpret.

NOT IDEAL

Avoid dual axes plots

Reference lines/areas used to provide context

Extra information can be provide to your visualization by adding reference lines or areas, as a point of comparison, such as an average line, or shaded background area to denote a particular period. These lines or areas should also be labeled to make it clear to the reader what they are looking at and what context this provides.

district median

07

The default ordering for graphs often is alphabetical, which should be avoided.

Graphs and tables should be ordered strategically, usually based on a quantitative value associated with a set of categories. For instance you may want to order on a particular category or value, helping convey a focus or underlying purpose.

NOT IDEAL

Data ordered in an intentional manner

A

H

B

C

C

F

BETTER

POSITION AND ARRANGEMENT

D E F

30%

E G D

G

A

H

B

thru 2 mo

BETTER

Having good chart hygiene will convey that care was taken in creating the plot and improve trust and legibility for your audience. Avoid mixing or changing axis intervals unless the data requires a statistical transformation. If using a logarithmic scale, be clear what each tick represents (think of the COVID-19 plots from Financial Times).

NOT IDEAL

Chart text consistently aligned, axis intervals consistently spaced

Q1

Q2

Q3

Jul

Aug

Q1

Axis lines start at appropriate values

1.2 m

1.0

0.8

08

1.0 m

BETTER

NOT IDEAL

Bar and area charts should always start at zero. With bar charts, our mind judges the length in order to make a comparison to the other bars. If the lengths are truncated, data are not encoded correctly and can mislead the audience. If using a truncated starting point, be clear in the chart description and provide annotation to explain the decision.

0.5

0

Q2

Q3

Q4

BETTER

Reduce chart clutter by breaking out each category into its own graph and displaying these in a strategically ordered grid. A small multiples structure allows the viewer to see each category’s data on its own and compare that to the data in other categories. This structure works well for indicator achievement across partners / agencies. If you are having a hard time seeing individual data points in your visualization (known as over-plotting), small multiples is a great technique to overcome this issue.

NOT IDEAL

Small multiples show data across categories

BETTER

Three-dimensional (3-D) graphs should be avoided. A 3-d graphic distorts the representation or encoding of the data, making it more challenging to interpret or even misleading. If additional dimensions are need, size (e.g. size of a dot on a scatter plot) and/or color can be used to encode the data.

NOT IDEAL

All graphics are two dimensions (no-3D)

Plot is free from decoration (chart junk)

600000

1m

400000

BETTER

NOT IDEAL

Reduce visual clutter in your plot in order to maximize the data-ink ratio and show the data. Chart junk include unnecessary colors or even images added to a plot, bold lines for border or grids, large legends, etc.

200000 0

FM Q1

FM FM FM Q2 Q3 Q4 Female Male

0.5

0

Female

Q1

Q2

Q3

Q4 09

COLOR BETTER

Use color sparingly; it should be used to convey a message. Thought should go into each color used, not just applying the software default palette. Use it to highlight the most important groups -- gray out the rest or mute the colors if they are absolutely necessary. This consistency with color assists in creating trust or accountability and feeds into the office’s visual branding. If in doubt, get it right in black and white -- then add color judiciously.

NOT IDEAL

Color use is intentional and consistent

The smaller the text the larger the contrast should be between the text color and the background color. contrast ratio: 1.02

BETTER

Ensure that your text is legible and stands out from the plot or slide background.

Your audience should be able to clearly read the titles, annotations, or labeling in the plot to extract the pertinent information. If the text cannot be read, it is clutter.

“The contrast ratio between background and foreground should be at least 2.5 for big text and at least 4 for small text” which you can test with the Color Contrast Check Tool (Rost 2018).

NOT IDEAL

Text color sufficiently contrasts with background

10

BETTER

Use the specified OHA colors that are color-blind safe and chosen with care. The OHA categorical color wheel and/or sequential palettes in the Color section will assist in this effort. If plot will be produced for external engagement, USAID colors from the Agency’s Graphic Standards Manual should be the default.

NOT IDEAL

Approved colors applied throughout

The smaller the text the larger the contrast should be between the text color and the background color. contrast ratio: 6.5

Annotation colors are subtle

NOT IDEAL

BETTER BETTER

End of campaign

NOT IDEAL

Annotations provide additional context but should not detract from the overall visual. Annotations can come in many forms including text, shaded areas, or arrows. Avoid large, colored boxes or arrows as call outs. The audience should be able to decipher the key message from the title; these annotations only help guide the audience to see what is expressed in the title or denote additional context.

Key intervention initiated

Color gradients applied appropriately

Ensure there is enough contrast between different steps of lightness and saturation when using a continuous or diverging color palette. The OHA continuous palettes have been designed to optimize the steps between colors for 11 colors. If you use fewer colors, you can make your own adjustments to create greater differences using tools like chroma.js. If you can, plot a histogram of the data being visualized.

If the histogram is stacked at the tails (data are skewed) a statistical transformation may be needed to normalize the data for the better color encoding. Be sure any transformations are noted in the visualization.

11

COLOR The USAID Graphics Standard Manual lays out the two colors found in the agency’s logo as the primary color palette, USAID Blue and USAID Red. These colors are used to “reinforce that the aid is From the American people” but provide a limited range of colors to work with for data visualization.

Strategic use of the OHA palette allows for consistent branding and reduces the time needed to think through color choices in every visualization. That said, colors should be used meaningfully and thought should be given to how these standard colors accentuate the visual/message.

OHA has developed an offshoot of these colors for visualization, expanding the number of categorical colors to choose from and creating a color-blind friendly palette (508 compliant). We started with Medium Blue and USAID Red and used a combination of platforms (Adobe Color, Palettable, Viz Palette and chroma. js), modifying them into Denim and Old Rose. From there, we expanded these colors into a full palette of categorical (each with a paired lighter version) and continuous/sequential colors.

Use USAID colors and text for all banners, text and text boxes. The USAID colors are available for use in graphs and charts, however the OHA palette is specifically for use in data visualization products (charts, graphs, visuals etc.). If in doubt of what color to use, try creating a visualization in black and white first. Then, add colors one at a time until data are sufficiently encoded to reinforce the message.

USAID COLOR PALETTE USAID Blue

#002F6C 0, 47, 108

OHA COLOR PALETTE Denim

USAID Red

#2057A7

#BA0C2F

186, 12, 47

Rich Black Medium Blue Light Blue

Web Blue

#0067B9

#205493

#212721 33, 39, 33

0, 103, 185

#A7C6ED

167, 198, 237

Dark Gray Medium Gray Light Gray

#6C6463

108, 100, 99

12

#8C8985

140, 137, 133

#CFCDC9

207, 205, 201

Dark Red

#651D32

101, 29, 50

Scooter

#1E87A5

Old Rose

#C43D4D

32, 87, 167

30, 135, 167

196, 61, 77

Denim

Scooter

Old Rose

Light

#BFDDFF

Light

#83DBFB

Light

#FF939A

Golden Sand Moody Blue

#F2BC40

242, 188, 64

Golden Sand Moody Blue Light

#FFDDA2

191, 221, 225

131, 219, 251

255, 147, 154

255, 221, 162

Trolley Grey

Nero

Matterhorn

Suva Gray

#808080

#202020

#505050

128, 128, 128

Title

32, 32, 32

Subtitle/Body

81, 81, 81

#8980CB

137, 128, 203 Light

#DFD3FF

Genoa

#287C6F

Burnt Sienna

#E07653

40, 124, 111

224, 118, 83

Genoa

Burnt Sienna

Light

#7ECFC0

Light

#FFCAA2

223, 211, 255

126, 207, 192

255, 202, 162

Light Gray

Caption

Shaded Area

Whisper

Matterhorn

#909090

#EBEBEB

#505050

145, 145, 145 235, 235, 235

Dark Grid

81, 81, 81

Light Grid

#D3D3D3

211, 211, 211

Sequential Palettes for Each of the OHA Colors

If you need to encode a quantitative palette, the continuous palettes below were developed using chroma.js to create perceptible steps in lightness and saturation for each of the standard colors.

Categorical OHA Color Ordering

For categorical/discrete colors, the color wheel graphic below provides the suggested color order. For example, if using Old Rose (12 o’clock) as the primary color, the next color that should be used is Scooter and then Moody Blue.

Denims #BFDDFF

#A5C5FF

#8BADFE

#7396EE

#5B82D8

#436EC1

#265BAB

#074895

#00347D

#002065

#000C4F

#74CCEC

#5BB5D5

#419FBE

#228AA8

#047491

#005E7A

#004964

#00354f

#00223A

#FC7A83

#EE636E

#D8505D

#C33C4C

#AF273D

#990D2E

#7F001C

#630005

#480000

#EAB538

#D2A01E

#BA8B00

#A27600

#8A6200

#734F00

#5E3C00

#4b2900

#3B1500

#CFC3FF

#B5AAF9

#9E94E0

#877EC9

#7069B2

#5A559B

#454185

#2F2E6F

#171d5a

#000A45

#89DACB

#72C3B4

#5CAC9E

#459688

#2D8073

#0D6C5F

#01564B

#004137

#002e24

#001B0E

#FD9873

#EC815D

#D56D4B

#BF5A39

#A84728

#923417

#7C2105

#670901

#4C0000

#C4C6C8

#B3B5B8

#A3A4A8

#939598

#838484

#747576

#646568

#535356

#414042

Scooters #A6FDFF

#8CE4FE

Old Roses #FFB5BA

#FF989F

Golden Sands #FFEC6F

#FCCE52

Moody Blues #E9DDFF

Genoas #A0F2E2

Burnt Siennas #FFD4AC

#FFB790

Trolley Greys #E6E7E8

#D5D7D8

13

SYMBOLOGY RECOMMENDED COLORS With the set of OHA standard colors, we have recommended the ordering for applying categorical colors in a graphic. There are a few cases in which having standard colors used across the OHA brand can help an audience more easily identify what they’re looking at since they come up time and again. Below we have laid out the three areas of recommended color assignments: agency, sex, and target achievement.

These colors are meant to be guides to help provide uniformity across OHA products, but are not the sole options as the purpose of the visualization should be the primary driving force to determine what colors should be used. For example, a visual may be showing that an agency is falling behind on a given indicator compared with sister agencies. Rather than using the recommended agency colors, it would be preferable to highlight the poor results using Old Rose, compared with the other data points, colors using Trolley Grey.

The colors for sex are inspired by the work of The Telegraph (2017), who drew their vision from the signage in UK’s women’s suffrage movements. These colors help us move beyond the stereotypical boy/blue and girl/pink.

For target achievement, we have strayed from the standard PEPFAR Panorama system colors for a couple of reasons: (a) the colors are not color blind safe, (b) they are lifted directly from default Excel colors, and (3) they are too highly saturated.

QUARTERLY TARGET ACHIEVEMENT < -25% T

#FF939A

Denim

CDC

Scooter L

#2057A7

#83DBFB

131, 219, 251

DOD

Genoa L

#7ECFC0

126, 207, 192

SEX COLORS Female

Moody Blue

#8980CB

137, 128, 203

14

Male

Genoa

#287C6F

40, 124, 111

#FFCAA2

255, 202, 162

-25% Peace Corps Moody Blue

Other

Trolley Grey

#808080

137, 128, 203

#8980CB

137, 128, 203

-10-10% T

+10% T

Scooter M

Trolley Grey L

#5BB5D5

#E6E6E6

91, 181, 213

-10%

230, 230, 230

+10%

Other

Trolley Grey

ICONS 32, 87, 167

Burnt Sienna L

255, 147, 154

AGENCY COLORS USAID

-25 - -10% T

Old Rose L

#808080

137, 128, 203

TARGET

The inclusion of icons can help impart a message on your audience or limit the text used, integrating them into the legends, tables, or text. UN OCHA released new Humanitarian Icons in May 2020 that apply to our work. Additional icons can be found at the Noun Project (be sure to cite and/or follow their licensing agreements). When combining icons in a work, be consistent and use comparable sizes, shapes, fills, colors and details.

TYPOGRAPHY Font, or typeface, can convey lots of information to the audience and create a sense of branding consistency. The primary font for OHA is the Source Sans Pro family for visualizations. If Source Sans Pro is not available, Arial or Gill Sans MT, can be used as an alternative. All are part of the USAID branding typography.

The table below provides the attributes associated with each typography option from the chart elements. Use the following elements to structure your visual along the OHA guidelines. As with color and other elements, these are guides not laws so artistic license can be taken, but know that the less the guidelines are adhered to, the less the visualization will look like an OHA product.

Source Sans Pro Family Source Sans Pro Regular

Source Sans Pro Light

Source Sans Pro

Typeface

Size

Case

Color

Title

Source Sans Pro Bold (Arial/Gills Sans Bold, )

14

ALL CAPS

#202020

Subtitle

Source Sans Pro (Arial/Gill Sans)

12

Sentence case

#505050

Small Multiple Titles

Source Sans Pro (Arial/Gill Sans)

11

Title Case

#505050

Axis Titles and Labels

Source Sans Pro (Arial/Gill Sans)

10

Sentence case

#505050

Legend Labels

Source Sans Pro (Arial/Gill Sans)

11

Sentence case

#505050

Annotation Text

Source Sans Pro SemiBold (Arial/Gill Sans Italic)

9

Sentence case

#505050

Direct Data Labels

Source Sans Pro (Arial/Gill Sans)

10

Sentence case

#505050

Source and Notes

Source Sans Pro (Arial/Gill Sans)

9

Sentence case

#909090

SemiBold

Source Sans Pro Bold

Aa Aa Aa Aa

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890-!@#$%^&*()_{}:”<>? abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890-!@#$%^&*()_{}:”<>? abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890-!@#$%^&*()_{}:”<>? abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890-!@#$%^&*()_{}:”<>?

HOW TO INSTALL Source Sans Pro does not come standard on PCs or Macs, but it is accessible from Google Fonts. Search for “Source Sans Pro” and then click on the “Download family” in the upper right hand corner. When downloaded, unzip the folder, right click on one of the typefaces in the folder and select “Install.” The typeface should now be available. If you are unable to install, you may need to reach out to M/ CIO to have them install it for you. They are currently working on making this accessible from Software Center.

15

APPLYING STYLE AND PRINCIPLES Example 1: Stacked bars - Stacked bar charts can pack a lot of data into a single

graphic but it makes it more difficult to read and compare data. Major problems arise from the fact each stacked segment does not have the same baseline and the categories and colors can quickly overwhelm a reader. A better alternative to

NOT IDEAL Axis labels missing comma and poor axis title

stacked bar charts (with more than two stacks) is to break it into small multiples.

This structure makes each group’s trends much clearer since each group is separated out and has their own zero baseline (useful for bar charts).

TX_NEW in Saturn Partners

LIBRA SAW POSITIVE TX_NEW GROWTH IN Q1 WHILE OTHERS FALTERED

Grid not useful, adding to chart junk

6000

Sagittari

primepartner Capricornus

500 0

value

Corvus

1,500

Eridanus

1,000

Libra Ophiuchus 2000

Color used for emphasis and de-emphasis

Ursa Major

Corvus

Capricornus

Auriga

Cepheus

Ophiuchus

500 0

Sagittarius Ursa Major

0 Too many periods onFY48Q1 FY48Q2 FY48Q3 FY48Q4 FY49Q1 FY49Q2 FY49Q3 FY49Q4 the x axis period

Eridanus

1,000

Cepheus 4000

Libra

1,500

Auriga

16

Purposeful title that integrates legend

BETTER

Too many categories/ colors and ordered alphabetically

1,500

Each stack broken out so all have a zero baseline

1,000 500 0 FY48Q1

FY49Q1

Limited x breaks to minimize chart junk

FY48Q1

FY49Q1

FY48Q1

FY49Q1

Source: FY50Q1 MSD

Example 2: Dual axis - Dual axis charts are frequently found in PEPFAR work, but are not easily interpretable. Our eyes and brain want to make sense of the relationship occurring in the plot and can falsely ascribe meaning to the intersection of the points on either axis. One alternative is to break the graph into

NOT IDEAL

two plots and place them side by side. By clearly separating out the data, you can more clearly articulate the purpose to your audience.

BETTER

AURIGA OPTIMIZING TESTING TO DECREASE TOTAL TESTS WHILE INCREASING POSITIVITY IN LAST 4 QUARTERS

Auriga HTS_TST and Positivity

Positivity and Total Tests in Saturn

60000

34%

Positivity separated to own plot above bar chart

14%

6.0%

Tick marks adding to chart junk

Color used to draw attention to key categories

55k Positivity

Quarterly Results

40000

60k

4.0%

Unclear which data belong to which axis

20000

40

2.0%

20 9k 0.0%

Diagonal text more difficult to read

Q1 50 FY

Q4 49 FY

Q3 49 FY

Q2 49 FY

Q1 49 FY

Q4 48 FY

Q3 48 FY

Q2 48 FY

FY

48

Q1

0

0

FY48Q1

FY48Q3

FY49Q1

FY49Q3

Data source provided

Source: FY50Q1 MSD

17

Example 3: Spaghetti Plots - Including many lines in the same line graph is

often referred to as a “spaghetti plot.” The different lines create clutter and can make it difficult to track one line across the plot. One alternative would be to convert this to small multiples. Another, like the remake, would be to include all the lines, but only call out one focal trend using a bold color and thicker stroke.

NOT IDEAL

This setup will draw attention the line of interesting, while the others fade into the background but still provide context. The legend is integrated into the title and labeled data points are limited but used to emphasize the point made in the title.

If needed, lines can be directly labeled to show important partners. The text color should match that of the line.

BETTER

No clear message in title

1,400

LARGE TREATMENT GAINS MADE BY URSA MAJOR IN FY49 Legend integrated into informative title

1,200

Thousands separator missing in y-axis Too many overlapping lines.

No integration with legend

1,000 Color used for emphasis and de-emphasis

800

810

600

400 Default colors used without purpose

200

Limited direct labeling of data points that help emphasize title

360

0 FY48Q1 FY48Q2 FY48Q3 FY48Q4 FY49Q1 FY49Q2 FY49Q3 FY49Q4 FY50Q1 Source: FY50Q1 MSD

18

Example 4: Tables - Tables are another important visualization, allowing you

to convey precise information. Tables need to follow data visualization principles as well or can suffer from information overload. As with a graph, the key message and takeaways should be clear to the intended audience. Color should be used

NOT IDEAL

sparingly, text should be horizontal and the title should be informative. Numbers should be right aligned for readability and formatted, through use of thousands separators or percent signs, and should have an appropriate amount of decimal places so as to avoid false precision.

BETTER Title missing

Text written vertically, which is more difficult to read.

Strategic use of color to draw attention only to key points of interest Annotating with circle is hard to read

Unnecessary decimal places

Use of the term positivity over yield

Multiple color palettes used with abandon.

19

RESOURCES & REFERENCES The following items are great resources, many of which were used as reference for this guide, directly or indirectly, and much of our own work.

References • • • • • • • • •

Brondbjerg, M. (2019). City Intelligence Data Design: Data Visualization and Information Design Guidelines. London City Intelligence.

Cohen et al. (2017). Women Mean Business. The Telegraph.

FT Visual & Data Journalism team. Coronavirus tracker: the latest figures as countries fight the Covid-19 resurgence.

Rost. L. (2018). An alternative to pink & blue: Colors for gender data.

Datawrapper.

Rost, L. (2018). What to consider when choosing colors for data visualization. Datawrapper.

Rost, L. (2018). Why not to use two axes, and what to use instead.

Datawrapper.

Rost. L. (2020). How to pick more beautiful colors for your data visualizations. Datawrapper.

Tufte, E. (2001). The Visual Display of Quantitative Information.

Graphic Press.

USAID. (2020). USAID Graphic Standards Manual and Partner CoBranding Guide.

Resources • • • • • • • •

20

Adobe Color BBC Audiences Tableau Style Guide - BBC chroma.js Chartable Blog - Datawrapper Evergreen Data Blog - Stephanie Evergreen Financial Times Chart Doctor - FT Visual & Data Journalism Fundamentals of Data Visualization - Claus Wilke Nightingale: The Journal of the Data Visualization Society

• • • • • • • • •

The Noun Project (Icons) PolicyViz Blog - Jonathan Schwabish Practical Typography - Matthew Butterick Story Telling With Data Book and Blog - Cole Nussbaumer Knaflic Ten Guidelines for Better Tables - Jonathan Schwabish Humanitarian Icons - UNOCHA Urban Institute Data Visualization Style Guide - Urban Institute.

Why does Data Vis need a style guide? (recording) - Amy Cesal Visualizing Data Book and Blog - Andy Kirk

Software Specific Palettes

To make it easier for data analysts to incorporate the OHA colors into different analytic platforms, we have created themes files for Excel (.xml) and a Preference file for Tableau (.tps). You can install these on your local machine and have access to them when working on any projects.

glitr R Package

We have developed an R package based on BBC’s bbplot to complement this work, including the color palettes, styles, fonts, and other parts of this style guide. The package built upon all the work put into ggplot, but applies the USAID OHA themes.

For more information about the package, functions, and installation can be found at github.com/USAID-OHA-SI/glitr.

ACKNOWLEDGMENTS A big thanks to our colleagues who supported this effort, through reviewing the material, making suggestions, and providing feedback. From the SIEI Division and the Analytic Standards Working Group, Katya Noykhovich, Ben Kasdan, Ivana Ferrer, Amy Wasserbach, Jessica Stephens, Noah Bartlett, Jessica Rose, and Gina Sarfaty.

This work could not have happened but for the work from the data visualization community - of experts, practitioners, bloggers, book writers, and newsrooms – that we read, study, and gain inspiration from. We started off wanting to build something in the vain of Urban Institute’s Data Visualization Style Guide by Ben Chartoff and Jonathan Schwabish, and stumbled upon the many organizational style guides out there. In the end, we drew a great deal of inspiration from Mike Brondbjerg’s Data Visualiation and Information Design Guidelines at London’s City Intelligence for the design and structure of this guide as well as his great categorical color wheel. Another big source of inspiration came from the incredible Chartable blog, written by Lisa Charlotte Rost and others on the Datawrapper team. Our remakes in the Chart Principles section were modeled after their “Thoughts & How To’s” blog series.

An additional thanks is due to the critical feedback and support on the content itself and the ceaseless inDesign questions to our external colleagues, Jordan Chafetz and Laura Hughes.

21

Data Visualization Style Guide February 2021

Aaron Chafetz, achafetz@usaid.gov Tim Essam, tessam@usaid.gov USAID | Office of HIV/AIDS SIEI Analytic Standards Working Group

Disclaimer: The findings, interpretation, and conclusions expressed herein are those of the authors and do not necessarily reflect the views of United States Agency for International Development. All errors remain our own.

22