Patterns

Data visualization

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.

Pro tip
The component allows you to easily format and display numbers using these guidelines.

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
ValueDisplay
Zero0
Null / undefined / not available-
Not applicableN/A
CSV exports
ValueDisplay
Zero0
Null / undefined / not applicable / not availableblank cell

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).

TrendColor
Positive
Neutral
Negative

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.

don't
Include a on hover. Both period values are displayed within a table and provide enough relative context.
do
Include a on hover to allow users the ability to view values since both periods are not visible.
Comparison Period Value (v1)Selected Period Value (v2)Expected % Change and Trend ArrowNotes
nullnull-Show null value only, no trend arrow
0, 5, or -5null-Show null value only, no trend arrow
null0, 5, or -5-Show null value only, no trend arrow
00
→ 0%
05
↑ -
Show trend arrow to display an increase (↑)
0-5
↓ -
Show trend arrow to show a decrease (↓)
50
↓ 100%
-50
↑ 100%

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 DO: Data
don't
Center column headers and data DON'T: Data
do
Use lines to separate rows DO: Rows
don't
Use background fills to separate rows DON'T: 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: Totals
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: Totals
do
Call out positive trends DO: Trends
don't
Call out negative trends DON'T: Trends