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.
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.
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.
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.)
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.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.
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.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.
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:
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.
Key elements of Urban charts are as follows:
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.
The chart parts are described in detail below.
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).
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.
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.
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.
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).
var colors=["#CFE8F3","#A2D4EC","#73BFE2","#46ABDB","#1696D2","#12719E","#0A4C6A","#062635"];
var colors=["#F5F5F5","#ECECEC","#E3E3E3","#DCDBDB","#D2D2D2","#9D9D9D","#696969","#353535"];
var colors=["#FFF2CF","#FCE39E","#FDD870","#FCCB41","#FDBF11","#E88E2D","#CA5800","#843215"];
var colors=["#F5CBDF","#EB99C2","#E46AA7","#E54096","#EC008B","#AF1F6B","#761548","#351123"];
var colors=["#DCEDD9","#BCDEB4","#98CF90","#78C26D","#55B748","#408941","#2C5C2D","#1A2E19"];
var colors=["#D5D5D4","#ADABAC","#848081","#5C5859","#332D2F","#262223","#1A1717","#0E0C0D"];
var colors=["#F8D5D4","#F1AAA9","#E9807D","#E25552","#DB2B27","#A4201D","#6E1614","#370B0A"];
Consider consolidating categories or breaking up the chart. Eight groups is really too many.
var colors=["#CA5800","#FDBF11","#FDD870","#FFF2CF","#CFE8F3","#73BFE2","#1696D2","#0a4c6a"];
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 |
|
Show trends or change over time |
|
Depict a part-to-whole relationship |
|
Show deviation from a reference point |
|
Show the distribution of values |
|
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.
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.
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:
Below, we share some guidance on writing from the MacArthur Foundation and a blog post by Amy Cesal:
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.
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.
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.
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.
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.”
The Urban Institute’s mission is to open minds, shape decisions, and offer solutions. To advance that goal, we must think intentionally about how we can learn from and speak to audiences that reflect the rich diversity of US communities, and we must foster a culture where employees from different backgrounds and perspectives enjoy mutual respect, inclusivity, and collegiality.
Urban’s efforts around diversity, equity, and inclusion (DEI) are reflected in our hiring and promotion practices as well as in our published work. With every data project, Urban researchers have an opportunity to carefully consider the language they use to describe people and groups and how to visually present data about these groups to readers, users, and audiences, including the communities that participate in or are affected by our research.
Urban editorial style does not prescribe language for the terms used to describe people. Instead, we encourage research teams to consider using language and terms that are inclusive and respectful of the people they describe. (See Urban’s DEI toolkits, a collection of reference guides for creating respectful and inclusive products.) Urban editors encourage researchers to choose terms mindfully and to use these terms consistently and appropriately throughout a research product, including in the titles, labels, and annotations of tables and graphs.
In some instances, Urban researchers may choose to use the same terms used in an underlying data source, such as the racial categories used by the US Census Bureau. In other cases, researchers may choose to deviate from those terms. Researchers may want to consider including a footnote explaining their language choices related to the people and groups in their research and, if appropriate, why these language choices mirror or deviate from the terms used in an underlying data source. (This footnote only needs to appear once in an Urban publication and is usually placed at the first instance of a term; it does not need to be repeated in the notes for each table and figure.) There are example footnotes in many of the DEI toolkits.
Many graphs and tables encode data by demographic group. Graph producers should take an active role in choosing how to order and present data values for different groups. Urban does not have universal rules about ordering demographic data in visuals, but a few considerations can help you make decisions about order:
Follow the Urban color palette to select colors for the groups in your dataset. Urban tries not to use color palettes that reinforce gender or racial stereotypes (e.g., pink for women and blue for men). Furthermore, researchers should avoid using colors associated with skin tones. Using standard Urban colors will avoid such issues.
Additional guidelines and strategies can be found in Urban’s Do No Harm Guide: Applying Equity Awareness in Data Visualization.
The following examples use the Urban style and color guidelines to illustrate common chart types in Excel. To deconstruct any example, download the Excel Example Files file. The Excel add-in and the R theme will replicate (or closely replicate) these styles but may still require some additional manual edits. Over time, this list will grow to include more graph types and additional guidance.
In the Excel parlance, bar charts that are oriented vertically are called “column charts” and bar charts that are oriented horizontally are called “bar charts.” Both versions use a rectangle (or bar) as the core attribute to visualize the data. We use the term “bar charts” below to refer to both orientations.
There are obvious advantages to plotting geographic data on a map—people can find themselves and their communities, they can see the pattern across a state or country, and they are generally familiar to readers. However, one should approach the desire of creating a map with skepticism and critical thought. Is a map the best way to present geographic data? Or is the map simply showing where people live? Does it show interesting relationships to explore or simply relying on the fact that a map can be familiar to readers?
Whether to create a map and which kind of map to use will depend on two questions: How important are the geographic patterns in the data? And how important is it for the reader to see a familiar map?
A longer version of this section—along with Urban-specific guidance on creating maps in Excel, Datawrapper, and R—can be found at the Code@Urban Github page.
The overarching challenge with creating data-driven maps is that the familiarity of the map does not necessarily accurately represent the data being plotted. Take, for example, the US presidential election. What matters in the election is the number of electoral votes for each state, which directly corresponds to the number of people living in the state, not the state’s land area. So, for example, Wyoming, Idaho, and Montana are more than 325,000 square miles of the country and currently have 11 electoral votes. Massachusetts, by comparison, is about 7,800 square miles or less than 2.5 percent of the other three states, but itself also has 11 electoral votes. To address this imbalance between land size and the importance of the geography in the data, cartograms are one alternative to the standard maps.
Cartograms reshape geographic areas based on the data values. They might use differently-sized circles or squares for each state, or similarly-sized shapes to correspond to data elements. In his book Cartography, Kenneth Field summarizes the purpose of cartograms:
The intent of most thematic maps is to provide the reader with a map from which comparisons can be made, and so geography is almost always inappropriate. This fact alone creates problems for perception and cognition. Accounting for these problems might be addressed in many ways such as manipulating the data itself. Alternatively, instead of changing the data and maintaining the geography, you can retain the data values but modify the geography to create a cartogram.
There are myriad maps to choose from to create a data visualization. Geographic units on a map (e.g., states or counties) can be colored differently (i.e., “choropleth maps”) or can include different shapes such as dots or lines. Furthermore, there are hundreds of different map projections to choose from, all of which are attempting to take the three-dimensional spherical shape of the earth and flatten it to two dimensions.
Depending on the purpose and content, maps should use different projections. US maps for print publication, or use in Urban reports should use the Albers Equal Area projection. Simple interactive county-level or state-level maps also typically use the Albers projection. Zoomable tile-based interactive maps, on the other hand, tend to use the Mercator projection.
Once you have decided that a map is the best solution for your data, the next question is what kind of map are you going to create? Urban typically produces three kinds of maps:
A secondary, but also important, question to consider when creating a map is how to choose the intervals (or bins) that will shade or define the geographic units. Placing data into discrete categories is, at its core, an aggregation problem. By combining several states or counties into a single bin, the reader cannot clearly distinguish how different the values are from one another.
There are four primary binning methods for maps:
Maps should follow the same basic rules as other graphics when it comes to colors. Choropleth maps, or maps that show the magnitude of a variable, should normally use the blue sequential color ramp.
Sometimes, a map needs to display change in a positive and negative way. In those cases, a diverging color palette works best. When using a diverging palette, be sure to clearly label the midpoint.
var colors=["#CA5800","#FDBF11","#FDD870","#FFF2CF","#CFE8F3","#73BFE2","#1696D2","#0a4c6a"];
Special palettes are sometimes required for specific projects or use cases. In such instances, contact the data visualization and design teams to work towards a solution.
var colors=["#761548", "#AF1F6B", "#E46AA7", "#EB99C2","#BCDEB4", "#98CF90", "#408941","#2C5C2D"];
Tables are a unique form of visualizing data because, unlike many charts and graphs, they are not usually intended to give a quick, visual representation of data. Instead, tables are useful when you want to show the exact values of your data or estimates. They are not the best solution if you want to show a lot of data or if you want to show the data in a compact space. A well-designed table can help your reader find specific numbers and discover patterns and outliers.
As with Urban charts, Urban tables follow style guidelines for font styles, font sizes, number formatting, number alignment, and cell/row/column shading. Each of these components has specific styling guidelines that make Urban visualizations look specific and consistent. Formatting differs slightly for PDF and web tables, as listed below. When built in Excel, tables are generally structured as shown below.
For tables that appear in Urban Word templates — which can be found on the Urban intranet — the built-in Urban styles will automatically apply the correct formatting. You can use these styles as you create tables, or your editor can apply the styles during the editing process. The default styles in Word can be found in the Home > Styles tab of the ribbon.
Tables for the Urban website—including the Urban Wire and Data at Urban blogs—should follow the formatting shown in the images below. Many figures and tables for the Urban Wire blog are built in the Datawrapper tool; contact the data visualization or blog team for assistance.
There are many ways to make your tables more visual by adding icons, color shades, small charts, and more. For additional options, see Ten Guidelines for Better Tables.
Have a question or looking for more help? Contact Aleszu Bajak or Jon Schwabish.
Photo from Shutterstock