Having a standardized language for how we handle data provides a consistent story for our users. This consistent story helps users 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 formatting

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

Totals should be semibold and Neutral 900 to stand out.

Use Teal 500 for positive trending percentages and Neutral 900 for negative trending percentages (call attention to positive values only).

• General
  • Always use at least 2 significant digits
  • If rounded, do not show trailing 0s
  • Use commas to separate every three digits
  • If truncated:
    • Use a tooltip to show the full value
    • Use the following abbreviations:
      • k (thousand)
      • M (million)
      • b (billion)
• Zero and Null/Undefined
  • In App
    • Zeros should be displayed as 0
    • Nulls and Undefined should be displayed as -
    • Metrics that are not applicable to a network should be displayed as N/A
  • CSV Exports
    • Zeros should be displayed as 0
    • Nulls and Undefined should be displayed as a blank cell
• Currency
  • Round to 2 decimal places
  • Truncate if value is >= 1,000
• Decimal
  • Round to 2 decimal places
  • Truncate if value is >= 1,000
• Integer
  • Optionally abbreviate if value is >= 10,000
• Percent
  • Round to 1 decimal place
  • Truncate if value is >= 100%
  • CSV: Include the percentage sign. e.g. 25% with the percentage sign. NOT .25 or 25
• Ordinal
  • Round to 2 decimal places
• Data Tables
  • Always use the full number - no rounding, no truncation and the same number of decimal places (do not drop trailing 0s) in order to make 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.

Trend (percent change) formatting

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

Display scenarios: 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.

Display scenarios: Trends in tables

Chart formatting

Charts are a visual way to display user data in a way to show trends and how their social activity impacts their business. When creating charts, try not to plot more than 4 items per chart.

Data Density

The max number of metrics allowed on a single chart should be no more then 10. The ideal state for readability is 4.

Chart types

Static charts

• Charts should sit on a white background with a gray border. The Sprout Social or Bambu logo should be located in the bottom-left and a URL in the bottom-right.
• Layout specifics will vary by visualization type. Documented guidelines for data include:
  • Bar charts
  • Line charts
  • Pie charts
  • Tables

Live charts

Line

A line chart is created by connecting a series of data points together with a line. Line charts are good to show change over time, comparisons and trends.

• Line weight: 3px
• Used for single metrics or comparisons.

Do

Round off points

Don't

Use sharp edges

Bar / Horizontal Bar

Bar charts are used for comparing discrete categories. Use a bar chart when there is a constraint to the number of data points that can appear on the visualization; otherwise, it becomes difficult to scale.

Stacked Area

• Used for multiple metrics. Cumulative totals.

Multi Select

• Line chart with an interactive key.
• Maximum of 20 items

Donut

Donut charts are best to use when you are trying to compare parts of a whole (ie x% out of 100%). They do not show changes over time. They work best when the data points are simple and comparisons between different percentages are dramatic.

• If needed use 1px white line separations between segments for clarity.
• Large and small variations available.
• Two small sized donunt charts is equal to the height of one large donut chart.

Because donut charts do not lend well to heavy text usage in the chart itself, keys are a good way to display topic labels.

Chart colors

It’s about contrast! Color should be distinct to allow the viewer to quickly and easily distinguish data points.

Color rotation

When creating charts, use complementary color schemes to ensure that the data can easily be differentiated. Colors should be applied in the following order:

• Teal 500
• Purple 700
• Pink 700
• Yellow 500
• Blue 500
• Magenta 500
• Neutral 500
• Green 500
• Orange 500
• Red 700
• Teal 900
• Purple 400
• Pink 900
• Yellow 900
• Blue 900
• Magenta 900
• Neutral 900
• Green 900
• Orange 900
• Red 400

Brand campaigns and initiatives

If you’re creating data visualizations for a brand campaign or initiative that has a specific color palette, you don’t need to use this color system. However, you should make sure that the colors you use have sufficient color contrast on the color wheel (avoid analogous color schemes).

Chart usage

Do

Show the axis lines where the data will be represented

Don't

Extend the axis lines to fill the full width of the content area

Do

Do always include a zero on the Y axis

Don't

Manipulate axes in such a way that the data becomes exaggerative

Don't

Use inconsistent intervals (skipping certain months, quarters or other data points).

Do

Use standard abbreviations for labels

Don't

Slant labels to make them fit

Do

Center the chart Key below the chart

Don't

Left or Right Align the chart Key or place it above the chart

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

Data states

Provide a clear and reassuring way to communicate to a user the status of their report, when an error occurred, data is still being gathered or there is no data.

Loading

Use a branded loader for main sections. If a branded loader is not provided, fall back to a generic loader.

Zero data

A zero data state is used when the raw data is returning zero data.

Gathering data

A gathering data state occurs when Sprout is gathering data from the source. This can take time and this state is used to represent that.

Data error

Occurs when an error prevents Sprout from gathering yoour data from the source.

Partial data

Occurs when the data source can only return a portion of a given set of data.

Unselected

Occurs when the visualization is dependent on an interactive key with nothing selected.