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 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%
  • 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.

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:

  • 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 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