Sprout SocialSprout Social
UpdatesCareersLogin

Patterns

Data visualization

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

to stand out.

Use

for positive trending percentages and
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.

Don't
include a tooltip on hover. Both period values are displayed within a table and provide enough relative context.
Do
Include a tooltip on hover to allow users the ability to view values since both periods are not visible.

Display scenarios: Trends in tables

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%

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 DO: Points
Don't
Use sharp edges DON'T: Points

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.

Do
Sort data from highest to lowest unless requirements dictate otherwise.
Do
Right-align topic labels in bar charts to the y-axis. Numerical values should be left aligned with the end of a given topic’s data bar.
Don't
Use a vertical bar chart if the labels are lengthy. Use a horizontal bar chart to give labels more space.

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.

Do
Use to convey five or fewer discrete categories that add up to 100%.
Do
Use a 1px stroke between sections of the pie if it helps add visual clarity between similar colors.
Don't
Use donut charts when there are so many data points that it is difficult to make distinctions between segments.
Don't
Use donuts charts when the size of all the segments are too similar (24%, 25%, 25%, 26%, for example).

Chart colors

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

Do
Use shades of the same hue to visually relate data
Do
Use contrasting colors to differentiate between pieces of data
Don't
Networks colors should not be used in data visualization.

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:

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 DO: Axis Lines
Don't
Extend the axis lines to fill the full width of the content area DON'T: Axis Lines
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 DO: Abbreviations
Don't
Slant labels to make them fit DON'T: Abbreviations
Do
Center the chart Key below the chart DO: Key
Don't
Left or Right Align the chart Key or place it above the chart DON'T: Key

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

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.

Chart Zero Data
Chart zero data state

Donut Zero Data
Donut chart zero data state

Horizontal Bar Zero Data
Horizontal bar zero data state

Influencers Zero Data
Influencers zero data state

Table Zero Data
Table zero data state

Word Cloud Zero Data
Work cloud zero data state

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.

Chart Gathering Donut Gathering Horizontal Bar Gathering Influencers Gathering Multi Select Gathering Overview Gathering Table Gathering Word Cloud Gathering

Data error

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

Chart Error Donut Error Horizontal Bar Error Influencers Error Multi Select Error Overview Error Table Error Word Cloud Error

Partial data

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

Area Chart Chart Donut Chart Gathering Data Donut Chart Missing Data Table Missing Data Table Partial Data

Unselected

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

Multi select chart