Having a standardized language for how we handle data provides a consistent story for our users, which helps them identify trends and answer questions about their data.

We use data visualization to represent complex numerical data and patterns in a clear and concise format. A data visualization prioritizes conveying large amounts of numerical information in a simple, visually digestible format. These visual representations of data should be aesthetically appealing, but not at the expense of being clear, consistent and thoughtful.

Number formats

All numbers follow the user setting for number format first and then the user’s locale default second.

General

• Use the locale specific formating e.g. commas to separate every three digits
• Display a decimal place and fraction precision, only when necessary.
• When using a decimal place, only display up to 2 digits of precision, truncating and rounding as necessary.
• By default, do not show trailing 0s
• Always include a leading 0 if the absolute value is < 1
• Truncate large numbers (>= 10,000) using the locale specific abbreviation format
  • Use a to show the full value
  • Display 2 decimal places of fractional precision, by default
  • Always display trailing 0s
  • Examples
    • 6,450,022,339 use 6.45B, not 6B
    • 5,005,939,332 use 5.01B, not 5B
    • 5,001,229,727 use 5.00B, not 5B
• Never round or truncate within CSV exports

Zero and null/undefined/not applicable

In app

CSV exports

Special number types

• Currency
  • Always include 2 decimal places of fractional precisions (e.g., $1,234.56)
  • Always display trailing 0s
• Averages & “per” metrics (e.g., Impressions per Message)
  • Decimal places
    • Always include at least 1 decimal place to indicate this is an average or “per” metric
    • Include a leading 0 if the value is < 1
    • Include a trailing 0 if that decimal place is 0
• Percent (e.g., Engagement Rate)
  • When using a decimal place, only display up to 1 digit of precision, truncating and rounding as necessary.
  • CSV
    • Include the percentage sign (e.g., 25% with the percentage sign)
    • Do not represent as decimals (e.g., NOT 0.25 or 25)

Data tables

• Always use the full number—no rounding, no truncation.
• Within each column, use the same number of decimal places (do not drop trailing 0s) in order to make both copying and pasting and comparison between values in the table easier for the user.

Data exports (CSV)

• For metrics provided directly by the network, use the same precision as the network (no rounding).
• For all other metrics, round following the precision guidelines.

Totals

Totals should be and to stand out.

Trend (percent change) formats

Trends, or percent change, are calculated based on values from a selected period (V2) vs. a comparison period (V1).

Tooltips

Scenario 1:

Displaying the percent change with both selected and comparison periods (V1, V2), such as in Profile or Message Data Tables.

Scenario 2:

Displaying the percent change with only one or none of the selected or comparison periods, such as a Summary Table.

Trends in tables

Table formatting

A table is a good way to showcase a large amount of information which has a variety of columns and data to show for each entity. A table should be used when multiple metrics and categories need to be presented together and accurate lookup of the data values is more important that showing patterns in the data.

do

Left align non-numeric values and right align numeric values

don't

Center column headers and data

do

Use lines to separate rows

don't

Use background fills to separate rows

do

Place totals as the last row with a 2px stroke and bold the text if the items in the table are added to equal the total

do

Place totals as the first row with a 2px stroke below and bold the text if the items in the total are not added from the other rows

do

Call out positive trends

don't

Call out negative trends