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.
General
- Always use at least 2 significant digits
- If rounded, do not show trailing
0
s - Use commas to separate every three digits
- Truncate & round very large numbers, generally a billion or above:
- Use a to show the full value
- Use three significant digits, including trailing 0s, to make the number meaningful
- Examples
6,450,022,339
use6.45B
, not6B
5,005,939,332
use5.01B
, not5B
5,001,229,727
use5.00B
, not5B
- When truncating, use the following abbreviations:
- thousand:
k
(lowercase) - million:
M
(uppercase) - billion:
B
(uppercase) - trillion:
T
(uppercase)
- thousand:
- Never round or truncate within CSV exports
Zero and null/undefined/not applicable
In app
Value | Display |
---|---|
Zero | 0 |
Null / undefined / not available | - |
Not applicable | N/A |
CSV exports
Value | Display |
---|---|
Zero | 0 |
Null / undefined / not applicable / not available | blank cell |
Special number types
- Currency
- Always include 2 decimal places (e.g.,
$1,234.56
)
- Always include 2 decimal places (e.g.,
- 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
- Decimal places
- Percent (e.g., Engagement Rate)
- Decimal places
- If < 100%, round to include 1 or 2 decimal places
- If < 1%, round to include at least 2 decimal places
- Include a leading 0 if the value is < 0.1
- Include a trailing 0 if that decimal place is 0
- CSV
- Include the percentage sign (e.g.,
25%
with the percentage sign) - Do not represent as decimals (e.g., NOT
0.25
or25
)
- Include the percentage sign (e.g.,
- Decimal places
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).
Trend | Color |
---|---|
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.
Trends in tables
Comparison Period Value (v1) | Selected Period Value (v2) | Expected % Change and Trend Arrow | Notes |
---|---|---|---|
null | null | - | Show null value only, no trend arrow |
0, 5, or -5 | null | - | Show null value only, no trend arrow |
null | 0, 5, or -5 | - | Show null value only, no trend arrow |
0 | 0 | → 0% | |
0 | 5 | ↑ - | Show trend arrow to display an increase (↑) |
0 | -5 | ↓ - | Show trend arrow to show a decrease (↓) |
5 | 0 | ↓ 100% | |
-5 | 0 | ↑ 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.
2px
stroke and bold the text if the items in the table are added to equal the total 2px
stroke below and bold the text if the items in the total are not added from the other rows