Data visualization

Getting started

• Choose a chart type appropriate for your data. The Data Visualization Catalogue is a good resource.
• Often, it’s better to highlight key points rather than overwhelm the user with a lot of information. When determining what data to display, consider the context, main takeaways, and audience.
• Consider the amount of attention the chart will likely get and how much engagement you’re asking for. If the chart is too complex, consider breaking it up.
• When writing your chart title and summary, ask yourself: What is the main takeaway from this chart? What does this chart inform the reader in the context of the entire piece?

Chart typography

All our data visualizations use our brand font Source Sans Pro and follow our Editorial Guidelines, including using sentence case titles.

We have two sets of chart sizes: web and PDF, which come in standard and half-size. Web and PDF use slightly different font sizes (see typography chart).

Generally, do not add any padding between your chart and the left edge of the artboard. This will allow the chart to line up cleanly with text in the final layout.

Note: For all sizes, you may need to export as a higher multiple or vector to ensure quality.

Web

• Web standard | 700px, exported at 2x for a final width of 1400px.
  Matches the width of the container on standard Drupal pages.
• Web half | 350px, exported at 2x for a final width of 700px. 
  Matches half the width of the container on standard Drupal pages, used for simple graphs. These can be placed side-by-side in a standard-width Drupal container, usually divided by a 1px width line in Fannie Mae Grey (#edebe9).

Example of web standard chart

All text is in Source Sans Pro

PDF

• PDF standard | 540px, exported at 2x for a final width of 1080px.
  Fills the entire space within the margins in our standard PDF templates.
• PDF half | 256.5px, exported at 2x for a final width of 513px.
  Fills the width of one column in our standard PDF templates.

Example of PDF standard chart

All text is in Source Sans Pro

Typography chart

• Standard and half-size graphs use the same font sizes.
• Titles are usually left-aligned but can be center-aligned if there is a compelling layout reason.
• For print applications, change Fannie Mae Black (#121212) to process black.

Readability

Whenever possible, use the following techniques to improve the readability of your charts.

Simplify

Avoid making your chart too crowded or busy. Do not pack graphic elements too close together.

Direct labeling

Direct labeling improves chart comprehension by allowing viewers to read the categories as they go, rather than relying on the legend.

Segment dividers

Segment dividers make it easier to distinguish individual chart sections. To use segment dividers, add a white stroke (usually 1px) to the shapes in your graph or chart.

Occasionally, segment dividers may not be suitable for your chart. This usually happens when one or more categories have a very low value and adding the strokes would get in the way of reading the data.

Color

We have provided palettes for multiple types of datasets; choose the one that matches your needs. All palettes are intended for use on white backgrounds.

Types of palettes:

• Categorical: the most common type of data visualization; categories of data have no inherent sequence.
• Sequential: used for data that has an inherent sequence, such as amount or intensity.
• Likert scale: used for Likert scale survey data (strongly agree/agree/neutral/disagree/strongly disagree/don’t know).
• Line graphs: line graphs use a unique palette.
• Bar/area compound charts: bar/area compound charts use a unique palette.

Categorical color palettes

Categorial palettes are used for data with no inherent sequence.

• Standard palettes should be used in most cases.
• Alternate palettes are reserved for situations when the standard palette doesn’t suit the data.
• Neutral palettes use only Black and Greys, and only exist for one-, two-, and three-category datasets. Use these for data where it is important for Fannie Mae to remain completely neutral.
   

When mapping the palette to your data, consider the following:

• Use the order of the palettes as a general guide for mapping colors to your data.
• Palettes have been set up generally in order of how much each color should be present (primary, then secondary, then tertiary colors).
• Palettes alternate between dark and light colors as much as possible to maximize readability and visual balance. This is important when working with directly adjacent color blocks (e.g., in pie, stacked bar, and area charts).
• If you have similar categories, consider using similar colors from the palette for that data.
• Be mindful of color associations (e.g. blue tends to be associated with positive; grey, with neutral; orange, with warning).

One group

Two groups

Three groups

Four groups

Five groups

Six groups

Seven groups

Sequential color palettes

Sequential palettes are used for data that has an inherent sequence, such as amount or intensity.

Two groups

Three groups

Four groups

Five groups

Six groups

Likert scale palette

Use this palette for survey data using the Likert scale format.

Likert scale

Line graph background palette

The line graph palette incorporates more secondary/tertiary backgrounds and brighter tints to ensure lines are easily distinguishable. Do not use this palette for other types of data visualization.

When creating a line graph, consider that it may be more on-brand and readable to use fewer backgrounds and instead employ different types of lines to convey data types or data markers. Examples of different line types include long and short dashes; dotted lines; and combinations of dashes and dots. However, be cautious that you do not make your graph too busy or hard to understand. Readability comes first.

Line graph palette

External links are solely for educational purposes and do not imply any endorsement or approval by Fannie Mae.