Urban Institute Data Visualization Style Guide

This data visualization style guide helps the Urban Institute ensure a uniform look and feel across charts, graphs, and tables that appear in Urban publications and on the Urban website. This guide is intended for Urban employees and, as such, may include references and links to internal language and tools.

We have made this guide public in the hope of creating a resource for other nonprofit and research organizations and to benefit the wider data visualization community. We will update and expand this guide on an ad hoc basis depending on the changing needs of Urban staff members and evolving technologies, tools, and publication types. If you’re looking for the previous version of the Urban style guide, click here.

LAST UPDATED ON OCTOBER 21, 2024

This site contains guidelines that are consistent with current data visualization best practices and design principles. It also reduces the burden of design and color decisions on individual researchers and analysts. These guidelines are primarily intended for charts, graphs, and tables that appear on the Urban website and in Urban (PDF) publications. There are minor sizing and typographic differences between visuals formatted for the web and those appearing in PDF documents and PowerPoint presentations, which we note throughout this guide.

The Urban Institute Excel Macro add-in and the Urban styles package for R (urbnthemes) are two open source tools Urban staff can use to more easily create and format their data visualizations for different publication types. Both tools automate much of the information in this guide, including applying formatting conventions for charts created in Urban style.

Table of Contents

1. Chart Typography and Sizing

2. Using the Excel Macro

3. Inserting Figures into Urban Word Templates

4. R Shiny, Tableau, and PowerBI Guidance

5. Chart Parts

6. Using Color in Urban Graphs and Charts

7. What Is the Right Chart for Your Data?

8. Best Practices for Creating Effective Charts

9. Data Visualization Absolutes

10. Accessibility

11. Considerations for Data related to Race, Ethnicity, and Gender

12. Chart Examples

13. Maps

14. Tables

Chart Typography and Sizing

Good chart typography creates a hierarchy among elements and guides the reader through the visual. Urban uses a defined set of font sizes and styles to create this hierarchy.

Urban uses the Lato font for all our products, including the website, PDF publications, and presentations. A suitable replacement is the default Arial font. If Lato is not installed on your computer, contact the Tech and Data department.

The font sizes in Urban charts depend on whether the chart is produced for the web or within a PDF. The Excel macro and R theme apply the correct font sizes to both web and PDF figures.

Descriptive text — title, subtitle, sources, notes, and logo — are handled differently for web and print (PDF) products. For web products, all text is included in a single image (e.g., PNG) file. For print (PDF) products, descriptive text is placed directly in the Microsoft Word file and not the chart image. Data labels, axis labels, and other text used directly in the chart should be included in the chart image.

Font

Color

Case

PDF figures

Web figures

Figure number

Lato Regular

#1696d2 or RGB(22, 150, 210)

ALL CAPS

8pt

11px

Title

Lato Black

#000000 or RGB(0,0,0)

Title (all major words capitalized)

12pt [inserted in the Word document, not the actual chart]

20px

Subtitle

Lato Italic

Black (#000000 or RGB(0,0,0))

Sentence (only the first word capitalized)

10pt [inserted in the Word document, not the actual chart]

16px

Axis titles

Lato Regular

Black (#000000 or RGB(0,0,0))

Sentence

8.5pt

12px

Axis labels

Lato Regular

Black (#000000 or RGB(0,0,0))

Sentence

8.5pt

12px

Data labels

Lato Regular

Black (#000000 or RGB(0,0,0))

Sentence

8.5pt

12px

Legend text

Lato Regular

Black (#000000 or RGB(0,0,0))

Sentence

9.5pt

14px

Source

Lato Regular

Black (#000000 or RGB(0,0,0))

Sentence

8pt

11px

Notes

Lato Regular

Black (#000000 or RGB(0,0,0))

Sentence

8pt

11px

Most of Urban’s charts will be full width (760px for web and 6.25” for PDFs). The main content width on the Urban website is 760px, which translates to approximately 125.83 characters in Excel. In PDF products, simple figures can be 3.13” wide, which is half the width of full-size figures.

Using the Excel Macro

Urban has created an add-in for Microsoft Excel that automatically applies Urban colors, chart formatting, font styling, and font sizes to Excel figures. This set of instructions will show you how to install and use the add-in.

Download the Urban Institute Excel macro here. Download the WorkRise macro here and the Tax Policy Center macro here.

Installing the add-in on PC computers

1. Download the Excel add-in from the Brand Identity Guidelines intranet page: Your Urban > Templates > Excel > “Excel add-in for creating Urban style charts.”

2. Save the file to your computer. You can put the file anywhere, but placing it directly in the Excel AddIn folder is preferred. On Urban PC computers, the add-in folder is most likely located on the D drive at: D:\Users\USERNAME\AppData\Roaming\Microsoft\AddIns\. (USERNAME is your username on the computer. On other computers, the folder may be in the C: drive in the same subdirectory.)

- If you can’t locate the AppData subdirectory, you can use Excel’s built-in Themes menu to help you locate it. Under the Page Layout tab, select the Themes button. At the bottom of that menu, select “Save Current Theme.” Excel will bring you to the Document Themes folder, which is in D:\Users\USERNAME\AppData\Roaming\Microsoft\folder. You can copy the folder location from the top of that window, paste it into your Windows Explorer folder, and navigate to the AddIn folder from there.

- To navigate to this AddIn folder location, you may need to unhide the AppData subdirectory. To do so, open a Windows Explorer window, click Tools, then View. You can now select “Show hidden files, folders, and drives” under the “Hidden files and folders” option.

3. Regardless of whether you saved the file to your AddIn folder or to another location on your computer, you can now install the add-in. To do so, select the File tab in the ribbon.

4. At the bottom of the File window, select Options.

5. In the Options window, select the Add-Ins option near the bottom of the left pane, and then select the Go... button at the bottom of the larger window.

6. At this point, a menu will load. If you saved the add-in file to the “AppData” folder location, the add-in should already be listed. You can simply check the box and select OK. If you saved it anywhere else, select Browse… and navigate to the location where you saved the UrbanGraphingStyle.xlam file. (Excel may ask if you’d like to place the add-in into your Roaming folder; it is fine to select OK here.) Select OK.

- SECURITY NOTE: If the ribbon tab does not appear after installing the add-in (this typically happens in a later session), it may be due to a security update from Microsoft. A detailed description of how to solve this issue can be found here.

Installing the add-in on Mac computers

1. Save the add-in to a location on your computer.

2. Under the Tools menu in the top toolbar, select the Excel Add-Ins... option.

3. Select Browse… and navigate to the UrbanGraphingStyle.xlam file. Select Open. The box next to the UrbanGraphStyle add-in should now be checked. In this smaller menu, select OK. You will now see the Urban Graph Styles tab in your Excel ribbon. The tab will appear every time you open Excel.

Using the add-in

1. Select the data you want to use to create your chart.

2. Click the chart option from the Urban Graph Styles menu that matches the style of your chart.

3. A pop-up box will appear asking if you want to format your graph for Web or Print (the Cancel option will close the dialog box). An Urban-formatted version of your chart will appear.

4. Edit the x-axis title and y-axis title or delete them if the units are already specified in the chart title or subtitle.

5. Edit any corresponding data cells to fix wording and capitalization as needed. Your edits should automatically appear in the chart.

6. To export your chart:

- On PC computers, use the Export menu in the add-in. You can choose a folder location and file type as you would for any other software tool.

- On Mac computers, the Export menu does not exist. Instead, copy the chart (Command-C), open the Preview tool, and open a new file (Command-N). Save the chart (Command-S) and use the drop-down menu to change the file format to PNG. In the resulting menu, change the Resolution to 600 (pixels/inch). Name the file and click Save.

Using the R Urban Theme

urbnthemes is a set of tools for creating Urban Institute–themed plots and maps in R (the theme has been tested against ggplot2 version 3.0.0; it will not function properly with older versions of ggplot2). The package extends ggplot2 with print and map themes as well as tools that make plotting easier. A comprehensive set of examples is available at the Institute R Users Group website.

library(urbnthemes) makes ggplot2 output align more closely with this style guide, but it does not produce publication-ready graphics. Visual styles must still be edited using your project’s normal editing workflow. Exporting charts as PDFs rather than image files (e.g., PNG, JPEG) will allow them to be edited more easily.

Run the following code to install or update urbnthemes:

install.packages("remotes")

remotes::install_github("UrbanInstitute/urbnthemes")

Run the following code at the top of each script:

library(tidyverse)

library(urbnthemes)

set_urbn_defaults(style = "print")

A comprehensive review, installation instructions, and more details and tutorials about using R at Urban and the urbnthemes package can be found in the Urban Institute R Graphics Guide.

Inserting Figures into Urban Word Templates

Urban Microsoft Word templates have built-in formatting to ensure correct placement of figures. To insert a figure—either as an Excel graph or as an image exported from another tool like R—follows these steps:

1. Start with the most recent Word template for your product, which can be downloaded from Urban Explorer on the Brand Identity Guidelines intranet page.

2. For each figure, copy and paste the figure template text from the figure number through the notes line (see image below). This will automatically apply the built-in styles to the text around the figure.

3. Write out the figure number, title, and subtitle (delete the subtitle if needed) directly in the Word file (not in the Excel graph or image).

4. Highlight the red “Figure Placer” paragraph and then paste your figure, choosing either “Use Destination Theme and Embed Workbook,” “Use Destination Theme and Link Data,” or “Paste Special … Microsoft Office Graphic Object.”

5. Write out the Source and Notes beneath the figure.

R Shiny, Tableau, and PowerBI Guidance

Urban staff use a variety of data analytics and visualization tools in their work. When it comes to R, interested users should consult the public-facing R tutorials available on the Urban Github site and consult the R User Group for additional resources. We recommend that Urban staff consult with the Data Visualization team for additional support related to obtaining Tableau and PowerBI licenses and creating graphs or dashboards with these tools.

Public-facing, high-visibility data visualization tools and dashboards published at Urban are built with custom tools and undergo a full design and build process to ensure that products hit the highest accessibility, UI, and mobile-friendly design standards—all with Urban’s wider audience in mind.

COMM and the Tech and Data Science teams are developing guidance on R Shiny, Tableau, PowerBI, and other off-the-shelf dashboarding tools for use at Urban. Our intake processes are connected for this kind of tooling request.

Currently, only the R Shiny tool is approved for specific use cases. Our consensus is that R Shiny dashboards can be appropriate for highly niche audiences (e.g., other researchers or select funders), with review and input from COMM’s Design and Data Visualization teams.

These products are not embedded on Urban’s website. Rather, our guidance is to screenshot and link to them, as seen in this Data at Urban post and this Urban Wire post. These guidelines are evolving and subject to change.

Chart Parts

Key elements of Urban charts are as follows:

- The chart should be referenced in the text.

- Titles use headline/title case, and subtitles use sentence case; all titles are left aligned.

- All text within the figure uses sentence-style capitalization.

In all Urban products, researchers should reference charts and tables in the text to provide context for the data. Figures and tables should be placed immediately after the paragraph that references them. If the chart consists of a limited number of values, consider a couple sentences of text to explain the data in lieu of an image.

Urban charts require a title, source line, and axis or other labels identifying the elements and units of the chart. This can be achieved by using some combination of a subtitle, axis titles, axis labels, data labels, and legend (not all elements will be necessary for every figure). Urban charts posted on the web also include an Urban tagline/logo in the lower-right corner of the figure so that when others copy and paste our charts, Urban is identified as the source.

For Excel charts produced for the web, add the title, subtitle, source, and notes directly in the Excel chart. Because Excel’s chart title and subtitle fields are limiting in terms of formatting, we use a regular text box for all the text at the top of the graphic, as well as for the source and notes text at the bottom.

In charts produced for PDF publications, add the title, subtitle, sources, and notes as text directly in the Microsoft Word file. Axis titles, labels, and the legend are added in Excel or in the R chart space directly.

On the web

In print (for PDFs)

The chart parts are described in detail below.

- Titles: Use headline case for titles and sentence case for subtitles. Keep them short and simple. Try to explain the chart in a few words and draw conclusions where possible. Use a subtitle to add qualifiers or further clarification. The unit of measurement should be mentioned only once, either in the subtitle or the y-axis label. For example, instead of a purely descriptive title, such as “Labor Force Participation Rate, Men and Women, 1950–2024,” a more active title would be “The Labor Force Participation Rate Has Declined for Men and Increased for Women.” Subtitles can be used to denote specifics about the data, such as time periods, frequency, units, or geography.

- Axis titles and labels: Use sentence-style capitalization for all text within the figure, including axis titles, data labels, and legends. In sentence-style capitalization, the first letter of the sentence and any proper names (including program names) are capitalized, and all other text is set in lowercase. For example, “Percentage of total funding,” “2021 operating expenses,” “Denver Regional Transportation District,” and “$50,000 and above.” You can use abbreviations in the axis titles and labels as long as the abbreviations are defined in the notes.

- Source: The source line should contain the source of the data for the figure and include full publication information, including the authors, title, and publication date, all in Urban’s notes citation style. All figures in Urban publications should have a source line. If the source of the data is Urban analysis, the source line can read “Authors’ analysis.”

- Notes: The notes line can include technical information about methodology, statistical explanations, and notes that apply to certain values. The notes should also define all acronyms and abbreviations used within the figure, using this format: “FPL = federal poverty level.” Notes that apply to certain cells in tables should use superscript letters as note references. Asterisks should only be used to indicate significance levels (e.g., p < 0.001, * = significant at 0.001 level).

- Legend: Stretch legends across the top of the chart between the title/subtitle and y-axis label. Order the series in the legend in a logical way, mirroring the order of the data in the chart. When possible, directly label the data in the chart and omit the legend.

- Data labels: Chart elements can be labeled to provide readers with the specific data values or additional context. Data labels should match the units of the chart and be placed as close as possible to the actual data point (e.g., top or inside a bar on a bar chart or a point on a line chart). Explanatory labels should be concise and explain important, surprising, or interesting aspects of the graph.

- Tagline: The Urban tagline is built from standard text using Lato Bold, 9pt, black, small caps, with 0.5pt of expanded character spacing. The word “Urban” is colored blue (RGB[22,150,210] or #1696d2) and “Institute” is black (RGB[0,0,0] or #000000). The Excel add-in automatically includes the tagline for web graphs. For PDF products, the tagline is added as text in the Microsoft Word file at the bottom right of the figure, with no spacing between the figure and the tagline. The tagline is omitted in government-funded products.

Color

Urban's main colors are cyan, gray, and black. Yellow and magenta are used as secondary colors throughout the new Urban brand. In general, yellow and magenta should be used sparingly; these colors are best for highlighting purposes, such as when drawing attention to a certain category or indicating a trend line. Tertiary colors for graphics include space gray, green, and red, and should be used infrequently.

When selecting colors for charts and graphs, first consider the type of data you are presenting. Usually, data for visualizations can be grouped into one of four main groups: categorical, sequential, diverging, or binary (see next sections for examples in the Urban color palette).

- Categorical palettes are best to distinguish discrete chunks of data that do not have an inherent ordering (e.g., race, state of residence).

- Sequential palettes are appropriate when data follow a certain order, such as when data range from low to high (e.g., poverty rates, unemployment rates). The typical approach is to use light(er) colors for low(er) values and dark(er) colors for high(er) values.

- Diverging palettes are used to distinguish values that vary from a central value, such as the average, median, or zero. Diverging palettes will use a neutral color for the central value, such as white or gray, and then employ a sequential color palette in either direction. For example, a sequential palette for changes in per capita gross domestic product might be centered at zero with a white color, then range to dark yellow for negative values and to dark blue for positive values. The center of the diverging palette should always be labeled to avoid confusing the reader.

- Binary palettes are a subset of categorical palettes and are used to distinguish between two distinct groups, such as Republicans and Democrats. When comparing data on binary gender groups, do not use blue to represent men and pink to represent women. Instead, choose a color combination such as yellow and cyan or another combination of our main graphic colors.

For more information about the subtleties of color and choosing colors for your data visualizations, refer to Datawrapper's blog post "A detailed guide to colors in data vis style guides” and Nightingale magazine's blog posts on the subject.

Color combinations

Urban’s core color palette consists of eight main colors, ordered below in a hierarchy from core colors to less commonly used colors. All Urban tool sets, including the Excel add-in and color palette, and the urbnthemes R package, follow this hierarchy.

Shades of main colors

Specific shades of each main categorical color are found below for use in graphs that require sequential and diverging palettes. It should be noted that tints and shades of colors in the Excel add-in and color palette do not exactly match these colors.

The palettes below offers multiple options for combining colors in Urban charts, though only the combinations shown in the first set of each section are included in the Excel add-in and R theme. When in doubt, individuals are encouraged to consult the Urban Design and/or Data Visualization teams for assistance in choosing color combinations.

Main graphic colors

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #ec008b

rgb(236,0,139)

CMYK: 0,100,41,7

Hex: #55b748

rgb(85,183,72)

CMYK: 54,0,61,28

Hex: #5c5859

rgb(92,88,89)

CMYK: 0,4,3,64

Hex: #db2b27

rgb(219,43,39)

CMYK: 0,80,82,14

Text and contrast

Urban Institute data visualizations should strive to meet Web Content Accessibility Guidelines (WCAG) to make web content most accessible to people with disabilities. (Read more about those international standards here and in the Urban Institute report Do No Harm Guide: Centering Accessibility in Data Visualization). Urban follows WCAG 2.0 Level AA guidance to ensure that background color and text pairings maximize contrast.

The color palettes below contain the correct white or black text to pass the WCAG AA ratings for contrast at smaller text sizes (18px or less).

Shades of main colors

Hex: #cfe8f3

rgb(207,232,243)

CMYK: 15,5,0,5

Hex: #a2d4ec

rgb(162,212,236)

CMYK: 31,10,0,7

Hex: #73bfe2

rgb(115,191,226)

CMYK: 49,15,0,11

Hex: #46abdb

rgb(70,171,219)

CMYK: 68,22,0,14

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #12719e

rgb(18,113,158)

CMYK: 89,28,0,38

Hex: #0a4c6a

rgb(10,76,106)

CMYK: 91,28,0,58

Hex: #062635

rgb(6,38,53)

CMYK: 89,28,0,79

var colors=["#CFE8F3","#A2D4EC","#73BFE2","#46ABDB","#1696D2","#12719E","#0A4C6A","#062635"];

Hex: #f5f5f5

rgb(245,245,245)

CMYK: 0,0,0,4

Hex: #ececec

rgb(236,236,236)

CMYK: 0,0,0,7

Hex: #e3e3e3

rgb(227,227,227)

CMYK: 0,0,0,11

Hex: #dcdbdb

rgb(220,219,219)

CMYK: 0,0,0,14

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #9d9d9d

rgb(157,157,157)

CMYK: 0,0,0,38

Hex: #696969

rgb(105,105,105)

CMYK: 0,0,0,59

Hex: #353535

rgb(53,53,53)

CMYK: 0,0,0,79

var colors=["#F5F5F5","#ECECEC","#E3E3E3","#DCDBDB","#D2D2D2","#9D9D9D","#696969","#353535"];

Hex: #fff2cf

rgb(255,242,207)

CMYK: 0,5,19,0

Hex: #fce39e

rgb(252,227,158)

CMYK: 0,10,37,1

Hex: #fdd870

rgb(253,216,112)

CMYK: 0,15,56,1

Hex: #fccb41

rgb(252,203,65)

CMYK: 0,19,74,1

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #e88e2d

rgb(232,142,45)

CMYK: 0,39,81,9

Hex: #ca5800

rgb(202,88,0)

CMYK: 0,56,100,21

Hex: #843215

rgb(132,50,21)

CMYK: 0,62,84,48

var colors=["#FFF2CF","#FCE39E","#FDD870","#FCCB41","#FDBF11","#E88E2D","#CA5800","#843215"];

Hex: #f5cbdf

rgb(245,203,223)

CMYK: 0,17,9,4

Hex: #eb99c2

rgb(235,153,194)

CMYK: 0,35,17,8

Hex: #e46aa7

rgb(228,106,167)

CMYK: 0,54,27,11

Hex: #e54096

rgb(229,64,150)

CMYK: 0,72,34,10

Hex: #ec008b

rgb(236,0,139)

CMYK: 0,100,41,7

Hex: #af1f6b

rgb(175,31,107)

CMYK: 0,82,39,31

Hex: #761548

rgb(118,21,72)

CMYK: 0,82,39,54

Hex: #351123

rgb(53,17,35)

CMYK: 0,68,34,79

var colors=["#F5CBDF","#EB99C2","#E46AA7","#E54096","#EC008B","#AF1F6B","#761548","#351123"];

Hex: #dcedd9

rgb(220,237,217)

CMYK: 7,0,8,7

Hex: #bcdeb4

rgb(188,222,180)

CMYK: 15,0,19,13

Hex: #98cf90

rgb(152,207,144)

CMYK: 27,0,30,19

Hex: #78c26d

rgb(120,194,109)

CMYK: 38,0,44,24

Hex: #55b748

rgb(85,183,72)

CMYK: 54,0,61,28

Hex: #408941

rgb(64,137,65)

CMYK: 53,0,53,46

Hex: #2c5c2d

rgb(44,92,45)

CMYK: 52,0,51,64

Hex: #1a2e19

rgb(26,46,25)

CMYK: 43,0,46,82

var colors=["#DCEDD9","#BCDEB4","#98CF90","#78C26D","#55B748","#408941","#2C5C2D","#1A2E19"];

Hex: #d5d5d4

rgb(213,213,212)

CMYK: 0,0,0,16

Hex: #adabac

rgb(173,171,172)

CMYK: 0,1,1,32

Hex: #848081

rgb(132,128,129)

CMYK: 0,3,2,48

Hex: #5c5859

rgb(92,88,89)

CMYK: 0,4,3,64

Hex: #332d2f

rgb(51,45,47)

CMYK: 0,12,8,80

Hex: #262223

rgb(38,34,35)

CMYK: 0,11,8,85

Hex: #1a1717

rgb(26,23,23)

CMYK: 0,12,12,90

Hex: #0e0c0d

rgb(14,12,13)

CMYK: 0,14,7,95

var colors=["#D5D5D4","#ADABAC","#848081","#5C5859","#332D2F","#262223","#1A1717","#0E0C0D"];

Hex: #f8d5d4

rgb(248,213,212)

CMYK: 0,14,15,3

Hex: #f1aaa9

rgb(241,170,169)

CMYK: 0,29,30,5

Hex: #e9807d

rgb(233,128,125)

CMYK: 0,45,46,9

Hex: #e25552

rgb(226,85,82)

CMYK: 0,62,64,11

Hex: #db2b27

rgb(219,43,39)

CMYK: 0,80,82,14

Hex: #a4201d

rgb(164,32,29)

CMYK: 0,80,82,36

Hex: #6e1614

rgb(110,22,20)

CMYK: 0,80,82,57

Hex: #370b0a

rgb(55,11,10)

CMYK: 0,80,82,78

var colors=["#F8D5D4","#F1AAA9","#E9807D","#E25552","#DB2B27","#A4201D","#6E1614","#370B0A"];

One group

For one color group, grey should not be used as it loses focus while magenta draws attention

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Two groups

Categorical

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Use blue and red sparingly, usually only when comparing political data.

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #db2b27

rgb(219,43,39)

CMYK: 0,80,82,14

Sequential

Hex: #a2d4ec

rgb(162,212,236)

CMYK: 31,10,0,7

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Three groups

Categorical

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #55b748

rgb(85,183,72)

CMYK: 54,0,61,28

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #ec008b

rgb(236,0,139)

CMYK: 0,100,41,7

Sequential

Hex: #a2d4ec

rgb(162,212,236)

CMYK: 31,10,0,7

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #0a4c6a

rgb(10,76,106)

CMYK: 91,28,0,58

Four groups

Categorical

Use yellow and magenta sparingly, usually only for highlighting data.

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #ec008b

rgb(236,0,139)

CMYK: 0,100,41,7

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #55b748

rgb(85,183,72)

CMYK: 54,0,61,28

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #ec008b

rgb(236,0,139)

CMYK: 0,100,41,7

Sequential

Hex: #cfe8f3

rgb(207,232,243)

CMYK: 15,5,0,5

Hex: #73bfe2

rgb(115,191,226)

CMYK: 49,15,0,11

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #0a4c6a

rgb(10,76,106)

CMYK: 91,28,0,58

Five groups

Categorical

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #ec008b

rgb(236,0,139)

CMYK: 0,100,41,7

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #0a4c6a

rgb(10,76,106)

CMYK: 91,28,0,58

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #55b748

rgb(85,183,72)

CMYK: 54,0,61,28

Hex: #0a4c6a

rgb(10,76,106)

CMYK: 91,28,0,58

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #55b748

rgb(85,183,72)

CMYK: 54,0,61,28

Hex: #ec008b

rgb(236,0,139)

CMYK: 0,100,41,7

Sequential

Hex: #cfe8f3

rgb(207,232,243)

CMYK: 15,5,0,5

Hex: #73bfe2

rgb(115,191,226)

CMYK: 49,15,0,11

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #0a4c6a

rgb(10,76,106)

CMYK: 91,28,0,58

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Six Groups

Categorical

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #55b748

rgb(85,183,72)

CMYK: 54,0,61,28

Hex: #ec008b

rgb(236,0,139)

CMYK: 0,100,41,7

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #55b748

rgb(85,183,72)

CMYK: 54,0,61,28

Hex: #0a4c6a

rgb(10,76,106)

CMYK: 91,28,0,58

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #0a4c6a

rgb(10,76,106)

CMYK: 91,28,0,58

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #55b748

rgb(85,183,72)

CMYK: 54,0,61,28

Hex: #ec008b

rgb(236,0,139)

CMYK: 0,100,41,7

Sequential

Hex: #cfe8f3

rgb(207,232,243)

CMYK: 15,5,0,5

Hex: #a2d4ec

rgb(162,212,236)

CMYK: 31,10,0,7

Hex: #73bfe2

rgb(115,191,226)

CMYK: 49,15,0,11

Hex: #46abdb

rgb(70,171,219)

CMYK: 68,22,0,14

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #12719e

rgb(18,113,158)

CMYK: 89,28,0,38

Seven Groups

Categorical

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #000000

rgb(0,0,0)

CMYK: 0,0,0,100

Hex: #d2d2d2

rgb(210,210,210)

CMYK: 0,0,0,18

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #55b748

rgb(85,183,72)

CMYK: 54,0,61,28

Hex: #ec008b

rgb(236,0,139)

CMYK: 0,100,41,7

Hex: #0a4c6a

rgb(10,76,106)

CMYK: 91,28,0,58

Sequential

Hex: #cfe8f3

rgb(207,232,243)

CMYK: 15,5,0,5

Hex: #a2d4ec

rgb(162,212,236)

CMYK: 31,10,0,7

Hex: #73bfe2

rgb(115,191,226)

CMYK: 49,15,0,11

Hex: #46abdb

rgb(70,171,219)

CMYK: 68,22,0,14

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #12719e

rgb(18,113,158)

CMYK: 89,28,0,38

Hex: #0a4c6a

rgb(10,76,106)

CMYK: 91,28,0,58

Eight Groups

Consider consolidating categories or breaking up the chart. Eight groups is really too many.

Diverging

Hex: #ca5800

rgb(202,88,0)

CMYK: 0,56,100,21

Hex: #fdbf11

rgb(253,191,17)

CMYK: 0,25,93,1

Hex: #fdd870

rgb(253,216,112)

CMYK: 0,15,56,1

Hex: #fff2cf

rgb(255,242,207)

CMYK: 0,5,19,0

Hex: #cfe8f3

rgb(207,232,243)

CMYK: 15,5,0,5

Hex: #73bfe2

rgb(115,191,226)

CMYK: 49,15,0,11

Hex: #1696d2

rgb(22,150,210)

CMYK: 90,29,0,18

Hex: #0a4c6a

rgb(10,76,106)

CMYK: 91,28,0,58

var colors=["#CA5800","#FDBF11","#FDD870","#FFF2CF","#CFE8F3","#73BFE2","#1696D2","#0a4c6a"];

What Is the Right Chart for Your Data?

Stop! Should it even be a chart?

Although charts are great for communicating data, they are not the appropriate tool for every situation. If you find explanatory sentences do a better job of distilling the information you want to convey, consider going without a chart. If your main goal is to present detailed information as opposed to showing patterns, or if it’s important that the reader can accurately determine the values of your data, consider using a table instead. You may also find that simply including a single, large number (commonly known as “big aggregate numbers”) may be sufficient. In these cases, inserting a simple text box or shape in your PowerPoint or Word document will work.

Selecting the appropriate chart type for your data and the message you want to convey is critical to creating a successful data visualization. The table below offers guidance on what types of charts are best suited for different purposes. However, this is not an infallible set of choices, because there is not a one-to-one relationship between data types and graph types; for example, a vertical bar chart can be used to compare categories or show changes over time. The list below should therefore be viewed as a starting resource to guide the graph creator. If you are unsure, reach out to the Data Visualization team to help explore your options.

I want to...

Compare values or rankings

- Bar charts

- Dot plots

Show trends or change over time

- Area charts

- Bar charts

- Connected scatterplots

- Dot plots

- Gantt charts

- Line charts

- Slope charts

- Sparklines

Depict a part-to-whole relationship

- Pie/donut charts

- Stacked bar charts

- Stacked area charts

- Tree maps

- Unit/waffle charts

Show deviation from a reference point

- Bubble charts

- Heat maps

- Scatter plots

Show the distribution of values

- Beeswarm charts

- Box and whisker plots

- Fan/confidence interval plots

- Histograms

- Strip charts

Best Practices for Creating Effective Charts

Data visualization is a mix of science and art. There are some basic guidelines and best practices rooted in our understanding of cognitive psychology, statistics, and human-computer interaction, but these also reflect preferences for different colors, typefaces, layouts, and more. The list of best practices provided here is a set of guidelines derived from years of work, research, and experience.

Keep it simple. Don’t try to stuff every data value into a single graph. This doesn’t mean you need to strip out all your data, but consider what you want your reader to come away with. You might be able to include all your data and highlight a subset of values. For example, consider a line chart with all 50 US states—you could use gray for the majority of states and add color to just the few you want to highlight.

Be consistent. Once you’ve chosen blue to represent one group in one chart, make sure all other charts in your publication or slide deck use blue to represent that group as well. This consistency makes reading and comprehension easier for your reader.

Small multiples. The small multiples approach is exactly what it sounds like: create a series of smaller graphs positioned in close proximity. Breaking a single larger, complex graph into smaller pieces can not only make a complex graph easier for readers to comprehend but also help create a sense of movement by aligning changes over time in a particular order.

There are two primary guidelines to follow when creating a small multiples visualization. First, each multiple should be the same type, shape, and size and use the same type of scales, which should start and end at the same values. The best way to think about small multiples is to take a single, dense graph and break it up into many charts—in other words, the framing elements of the chart should not change. Second, try to order the small multiple graphs in a meaningful way—for example, by some value, geographic location, or even alphabetically.

Highlighting. Highlighting can call attention to specific data points in very dense charts. The observations you want the reader to focus on should be rendered in a color that helps them stand out (usually pink or yellow at Urban), while the rest of the series are in a different color (usually blue, black, or gray). However, be selective with your use of color to highlight specific values, series, or observations, because too many colors can make it difficult to pick out the values on which you want your reader to focus.

Reference lines. There may be times when you want to include a reference line or pointer for a specific event, threshold, or benchmark. In such cases, make sure that your line is measured precisely. For example, if you are marking June 2010 in a line chart, the reference line should be located halfway between 2010 and 2011.

Titles. Use active, concise titles. For example, instead of a purely descriptive title, such as “Labor Force Participation Rate, Men and Women, 1950–2019,” a more active title would be “The Labor Force Participation Rate Has Declined for Men and Increased for Women.” Subtitles can be used to denote specifics about the data, such as time periods, frequency, units, or geography.

Annotation. Annotation is one of the most important ways to improve your data communication efforts. There are two primary ways to annotate your visualizations. First, adding explanatory text within the graph itself can highlight specific values or explain content. Second, you can add a layer of annotation to explain how to read the graph. This approach can be especially useful for readers who may not be familiar with a particular graph type. For example, you could add a pointer that denotes how the values get larger or smaller along each axis in a scatterplot.

Data labels and markers. When possible, avoid using legends and instead directly label the data on the graph. Endeavor to evenly space and align the labels instead of scattering them around the graph, which can make it difficult for your reader to find the label and risks emphasizing one series or data value over another. On a line chart, for example, you might place the labels at the far right of the graph, slightly outside the graph space, but left-aligned.

Marking outliers. Data values that are significantly different from others in your dataset may be considered outliers. In some sense, the statistical definition of an outlier is not necessarily important; a data value(s) may simply look like an outlier when plotted in your graph, which may require some explanation. Be careful with outliers, however; they can signify an interesting result or finding, but they may also indicate that something is wrong or mismeasured in the data.

Showing uncertainty. Visualizations that depict distributions or uncertainty may be inherently difficult for many readers who are not familiar with the underlying data or statistical concepts. It is therefore important to clearly explain when certain data are missing or if there is uncertainty around certain estimates.

There are various kinds of data uncertainty. One form of uncertainty stems from randomness in the data. Small samples are a prime example of this kind of uncertainty. Consider a political poll that gives candidate Smith a 54 percent approval rating with a margin of error of plus or minus 4 percentage points. The poll has uncertainty because the dataset is only a sample of people who responded to the survey.

Another form of uncertainty comes from inaccurate, untrusted, imprecise, or unknown data. In some cases, we would be unable to address the uncertainty because we aren’t aware of it. In other cases, we could say our data are imprecise because, for example, it’s measured at an aggregate level; for example, infants’ ages captured in months rather than weeks.

Urban takes both kinds of uncertainty seriously, and researchers are best equipped to assess whether their data are unreliable. But knowing when to visualize different kinds of uncertainty is a different task and often depends on the knowledge and statistical sophistication of your reader.

Stay away from 3-D. There is no need to add a superfluous third dimension to your chart, particularly when you don’t have a third value. The 3-D effect available in many software tools actually distorts the data values because the effect is not actually 3-D but rather a perspective rendering of 3-D.

Be careful with data transformations. Log scales or other transformations can be useful for depicting rates of change or to address large outliers. The obvious trade-off is that many readers will not understand what a log transformation is and what it means. For example, everyone can understand what $150,000 of income means, but a logged value of 5.18 is not familiar to many readers. However, log scales can be an appropriate choice when the rate of change is more meaningful than absolute values.

Data Visualization Absolutes

The Urban Institute is committed to exploring and expanding how we create and engage audiences and readers through our visual display of information. While the practice of data visualization is a mixture of art and science with ample opportunity for creativity, there are certain data visualization practices that we avoid.

- Nonzero baselines. The axis in bar charts (whether vertical or horizontal) should always start at zero. The gaps between bars are overemphasized when the value axis starts at something other than zero. When small differences between bars are important to show but a zero axis makes those differences difficult for the reader to see, consider adjusting the data to show percent change, difference, or some other similar adjustment. It is important to note that other charts types that do not use length or height as the primary encoding—including, for example, scatterplots and line charts—do not necessarily need to start at zero.

- Dual axis charts. Charts that have two axes—where one series is tagged to one axis and another series is tagged to another, parallel axis—should be avoided. These kinds of charts are confusing, difficult to read, and are often misleading. There are several possible solutions to creating a dual axis chart, including multiple graphs (arrayed either horizontally or vertically); showing the percent change or another normalization; or using a different chart type such as a connected scatterplot. (There are two exceptions to this rule: charts that show the translation of a single measure such as Fahrenheit and Celsius temperatures; and the Pareto chart, which shows individual values as bars and a line showing the cumulative sum.)

- Pie charts with too many slices. This advice is purposely left unclear. There is no specific “rule” about how many slices are too many slices in a pie chart, but the general recommendation is to keep the overall number of slices in pie charts to fewer than 5. Humans cannot easily compare differently sized slices in pie charts, which reduces the effectiveness of the chart itself. In general, pie charts are best used when the slices of interest are values that generate right angles, which are familiar shapes, namely 25% and 75%, or a straight vertical line through the chart, namely 50%. While there may be exceptions to this guidance, Urban style is to avoid pie charts that have too many slices and are therefore difficult to understand.

- Avoid too many categories. While the Urban color palette offers several hues and multiple tints and shades, our standard is to keep the number of categories in any graph to fewer than seven. Stacked bar/column charts, pie charts, line charts, and other charts with seven or more series/colors will look cluttered and be difficult to read. In these instances, fewer series or several multiple charts may be a better solution.

Accessibility

It’s important to consider how people with different impairments and disabilities access online content. Many people rely on screen readers to navigate the internet. (Screen readers are tools used by blind people, people with low vision, and people with learning disabilities who consume text in audio formats.) When a screen reader passes by content on the screen, including file names, titles, and headings, it reads this content out loud. Ensuring that content will work with screen readers is a large part of making a document accessible. Some of the primary issues we’re concerned with when we talk about accessibility are hearing issues, vision issues, color blindness, ability, cognition, neurodiversity, and learning disabilities. Not all the conditions are permanent—consider, for instance, how you would use a computer if you were to break your arm.

To create accessible content, Urban follows the guidelines laid out in Section 508 of the Rehabilitation Act of 1973. Section 508 requires US federal government agencies to develop, procure, maintain, and use information and communications technology that is accessible to people with disabilities. We also follow some of the recommendations and guidelines from the Web Content Accessibility Guidelines. Some federal agencies that fund Urban work have agency-specific accessibility requirements that we are asked to follow.

Data visualization creators can do several things to create accessible charts and tables:

Write alt text

- Screen readers can only communicate information via text. To meet accessibility requirements, all nontext items in a web product require “alternative text” (alt text), or a written description that communicates visual content. All Urban website content must have alt text for charts, tables, and images. All Urban PDF products asked to meet 508 accessibility requirements must also have alt text, but alt text is not otherwise required for images in Urban PDF products.

- Urban researchers are responsible for writing alt text when it is required. It is often easier to write alt text as you create your figures rather than at the end of the writing process. Engaging with Urban’s Disability Affinity Group may be one way to seek advice on writing good alt text or, more generally, creating accessible content.

Below, we share some guidance on writing from the MacArthur Foundation and a blog post by Amy Cesal:

- Alternative text should present the content and function, not necessarily a description, of an image. If you had to remove the image, what text would you put in its place?

- If an image is decorative, such as a header image on a blog or cover image on a report, or the alternative text is provided in nearby text, then the image should have empty alternative text (some tools have an option for “blank” or “empty”). If this is not an option, leave the field blank. You should not put empty spaces, empty quotes (except in HTML alt=""), or any other nonsense information in these fields.

- Avoid words like “picture of,” “image of,” or “link to.”

- Use the fewest number of words necessary. Less than 160 characters is ideal for search engine optimization.

- Avoid phrases like “click here,” “here,” “more,” “more information,” “read more,” and “continue.” Instead, use descriptive text that informs a user of the link destination.

Meet color contrast requirements

Urban’s color palette has been tested to meet accessibility requirements. If you are working with an agency or group that requires additional accessibility considerations, please contact the Data Visualization or Design teams. You can also consider adding additional encodings to your visualizations, such as hashmarks, stripes, or other patterns. This style guide promotes clean design and graphs that are free of extraneous colors, but when communicating data to readers with accessibility needs, additional encodings may be important.

Web Content Accessibility Guidelines (WCAG) 2.0 Level AA requires the contrast ratio of the luminance (think: brightness) of two colors to be 4.5:1 for normal text and 3:1 for large text. A higher level of contrast (Level AAA), requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. Text standards also apply to text in graphics, such as data labels in a chart or text boxes in a logic model.

Please note that the Urban blue used in Urban Word templates does not meet color contrast requirements for headings. If you are producing an Urban PDF product that needs to meet 508 accessibility requirements, the editorial team has 508-compliant Word templates that use Urban dark blue to meet contrast requirements.

Avoid merged cells in tables

Tables are possibly the most difficult aspect of working with 508 accessibility standards. Tables that meet accessibility requirements cannot have any merged cells, blank cells, blank rows, or blank columns, as screen readers have a difficult time with spanner headings and blank cells. To meet 508-accessibility requirements, tables need to be stripped of spanner headings so that every column has a separate heading. This can be a tedious and time-consuming process. If you know you are producing a product that needs to be 508 compliant, it can be helpful to design tables that have no spanner headings from the start.

Use built-in Word styles in Urban Word templates

Manual formatting that creates tabbed indents for paragraphs, line spaces between paragraphs, and arbitrary heading styles is not accessible, as it creates extra characters that screen readers will read. Urban Word templates have built-in styles that apply proper line spacing, paragraph indents, and heading hierarchy without relying on manual formatting. Urban’s built-in styles also cover table and figure formatting to ensure that proper line spacing and styles are applied to figure and table numbers, titles, subtitles, and notes. Built-in styles also allow us to apply the correct formatting and spacing to table elements, including column headings, row headings, table rows, and table text. Using these styles rather than manually applying formatting will help meet accessibility guidelines for line spacing, headings, and color contrast. You can apply Urban Word styles using the Styles Pane in Word, and/or your editor will review and apply these styles during the editing process. For PDF products that need to meet 508 accessibility requirements, use the 508-compliant brief or report template, which has additional accessibility formatting built in.

Write in plain language

Government agencies follow plain language guidelines to meet the Plain Language Act of 2010. In cases where Urban products must meet plain language requirements, the Urban Editorial team can conduct a plain language edit in addition to a copyedit. But even if your product does not need to meet plain language requirements, adopting some principles of plain language can help your readers better understand your charts and tables.

- Use active voice in titles and labels. Urban style is to use concise, active titles that tell the reader what they are supposed to learn and take away from the graph. Active titles help tell the story of your graph.

- Make sure to explain all chart parts. Your chart or table should have enough information that it can be understood out of context of the rest of your document. Make sure titles, labels, legends, and notes provide enough information to tell the full story of your data. Your target audience should be able to navigate your chart, even if they don’t have a technical background.

- Reduce jargon. Think about your audience and decide whether the terms that are familiar to you as a researcher will be understood by your readers. Aim to be as clear as possible and try to replace complicated words and phrases with more direct language. If a technical term is necessary to include but may not be understood by all your readers, define it!

- Omit needless words. With charts and tables, space is at a premium. Identify phrases that can be rewritten to be more concise.

Additional guidelines and strategies can be found in Urban’s Do No Harm Guide: Centering Accessibility in Data Visualization and the following Urban editorial resources: “508 Compliance Process” and “508 Accessibility Basics.”