MarCom Studio

marcom-studio-internal.svg

What kind of services/assistance do you need?

Creative Communication Platforms Marketing Merchandising News Media Official Communication Channels On-Campus Promotion Resources Social Media Strategic Counsel Web Services
Home   Resources   Style Guides   Writing Guides   Data Storytelling

Data Storytelling

Use this data visualization style guide to create a uniform look and feel to all UTSA charts and graphs. This page contains guidelines that are in line with data visualization best practices and proven design principles. It also eliminates the burden of design and color decisions when creating charts.

Design Quick Takeaways​

  • ​Keep it simple - less is more! Data displays should be clear, concise, and clean.
  • Use bright colors sparingly and to highlight unique or interesting data.
  • Use the five-second rule: Within 5 seconds of viewing the dashboard, the audience should be able to take away at least one piece of relevant information.

Typography

UTSA uses the font Segoe UI and the font color black (#000000). When possible, this font should be used to create charts. Good chart typography creates a hierarchy among elements and guides the reader through the visual.

Typography reminders:

  • Use the whole number and comma formats for numerical data. Use the currency symbol for financial data.​​​​ Be consistent with decimal places and number formatting throughout.​
  • Right-align all numerical data, including percentages and financial data.
  • Left-alignment for titles and legends is preferred. However, other alignments are okay for some graphs. Keep text-alignment consistent throughout.
  • Do not use units (e.g. Use 4,000, not 4K) 
  • Avoid abbreviations (use "Total" instead of "Ttl") if possible, and do not use symbols (e.g. use "Number" or "No.", not "#"). If using an abbreviation, make sure it is grammatically correct.
Dashboard Item Print Size Case Alignment and Notes
FIGURE NUMBER 10 ALL CAPS Use figure numbers when you need to reference a chart or graph elsewhere in a report or dashboard.​ For example, referencing a chart in a paragraph elsewhere in the report.
Dashboard Title 20 to 36 Sentence case​ + Bold Left-align preferred, center-align okay. Keep it short, simple, and descriptive of the entire dashboard.
Graph Title 12 to 14 Sentence case + Bold The default size is 14​; default alignment is left. Center-align is okay. Avoid qualifiers, e.g. some, most, none, all, always.
Subtitle 11​ Sentence case Use a subtitle to add qualifiers or clarify the title. Use the same alignment, and place it under the title. Rarely used in IR.
X and Y axis titles 11 Sentence case​ The default for axis titles is set to "off". Add axis titles if it is not immediately clear from the main title or data what the axis measures. Rarely used in IR.
X and Y axis labels 10 Sentence case​ The default size is 10; default alignment is horizontal. Do not use units, multipliers, or abbreviations. Add additional information to the axis title or main title if needed.
Key or legend labels 11​ Sentence case The default size is 11; default alignment is top left, horizontal, under the title. Other alignments are okay, depending upon the graph. Legend title default is "off".
Slicer title 12 Sentence case​ The default size is 11; default alignment is center. Must manually change from list to dropdown menu and type in the title.
Slicer items 11 Sentence case Select dropdown manually after adding slicer. Font size, type, color, and selection controls are set in theme. Size the slicer width to accommodate longer selections. Slicer height must be set to 65. As much as possible, all slicers should be the exact same size. ​
Data labels 10​ Sentence case Align horizontally, do not use units or multipliers, only use if there are fewer than 10 total columns, points, or other categories in the graph/chart. All numbers must be formatted to have a comma.​ 
Values in tables and matrices 10 Sentence case Default size is 10, and alignment for all numerical data is set to right (best practice).
Source and notes 10​ Sentence case Bold the words Source, Note, or Notes followed by a colon. Place below the graphic and left-align.

Color

There are eight main colors to use for graphics and dashboards. Navy, orange, yellow, light blue, light gray, and dark gray form the core colors. Green/teal and pink should be used sparingly, as these colors should be considered for highlighting purposes (such as drawing attention to a certain category or indicating a trend line).

Rules for using color

  • Use only the colors in this Style Guide, including gradations.
  • Use bright colors sparingly and to highlight unique or interesting data.
  • When displaying data by gender, do not use blue for males or pink for females. Instead, choose a color combination like navy and orange, or another combination of our main graphic colors.
  • Refrain from using more than six different colors on a graph. The only exception to this rule are some race/ethnicity graphs.

 

Color Combinations

Main Graphic Colors

main-graphic-colors.png 

Shades of Main Colors

Shades of Main Colors 

One Group

Use either navy or orange when graphing one data category.

one-group.png 

Two Groups

Categorical Data

Two groups of categorical data 

Sequential Data

Two groups of sequential data 

Three Groups

Categorical Data

Three groups of categorical data 

Sequential Data

Three groups of sequential data

Graph Layout Examples

The following examples use the styles and colors to illustrate common chart types.

Graph Guidelines

  • ​Do not put time on the y-axis.
  • Avoid 3D charts.
  • Avoid more than three to five categories on a stacked bar or column chart, or a stacked 100% column chart. The categories must be easy to see.
  • ​Avoid using pie and donut charts. If you use a pie or donut chart, do not include more than three categories per pie or donut chart. Never use multiple pie or donut charts to compare data.
  • Use data labels sparingly so as not to clutter the graph.
  • Do not put units or multipliers on the axes or data labels. Put them in the title if necessary.
  • X-axis labels must be horizontally aligned. No slanted or diagonal labels.

Bar and Column Charts

bar-column-example1.png   bar-column-example2.png

  • The y-axis should start at zero in most cases.
  • The width of the bars should be about twice the width of the space between the bars.
  • If you are showing fewer than 10 bars, consider eliminating the horizontal gridlines and y-axis line and directly labeling the data points.

Bar Chart 

bar-chart.png 

  • Eight categories and one color. The categories are placed on the y-axis instead of the legend.
  • No legend needed because there is only one color and all categories are clearly visible on axis.
  • This style is preferred to display race/ethnicity data.

Grouped Column Chart

grouped-column-chart.png 

  • Legend is left-aligned. Use this alignment if the legend is not fully visible in other variations.
  • Whenever possible, limit the categories on your graph to six or less.

Matrix and Tables

  • Left-aligned row header and center-aligned column headers on a white (#ffffff) background.
  • All black (#000000), Segoe UI text, and values. Row, column, and totals are bolded.
  • Font size of at least 10 for all matrix or table text and values.
  • Alternating color bands of gray (#efefef) and white.
  • Horizontal and vertical gridlines and outline turned on, line color is #e7e7e7, line thickness is 2.
  • All values (numeric, percentage, monetary) must be right-aligned.
  • No frame around the matrix or table.
  • If possible, size the matrix or table so that users do not need to scroll up or down or side-to-side to see data.

Matrix Examples

matrix-example1.png 

matrix-example2.png

For more information on data visualization, styling, and presentation, contact Shanna Sherwood in Institutional Research and Analysis.