Skip to main content

Data Visualizations

Visualizations provide ways to quickly answer questions with data.

Data components

At a high level, there are three different data visualization components. Each one is available for delivery teams to incorporate data into their respective surface areas.

Single-metric widgets

A single metric widget is a sparkline-like information display that supports an individual user's workflow. It provides a single data point.

Multi-metric panels

Multi-metric information displays that may include standalone metrics, period changes, a single chart, and drill-downs to more detailed lists or reports.

Dashboards

Dashboards are pages with multiple data components, such as the Team dashboard in Coaching. A common trait of dashboards is single sets of filters that adjust all of the data on the page. Dashboard data can be real-time or updated periodically.

Chart types

Line charts

Line charts are ideal for displaying trends and changes over time.

Time is always represented on the x-axis. Zero should be the default starting point of the y-axis, unless an exception is defined.

  • Straight lines should be used for rates or percentage metrics where the results are exact, such as reply rate.

  • Curved lines round the corners at certain data points. They should be used when there is a degree of uncertainty, such as when dealing with sentiment.

Area charts

Area charts are similar to line charts, but are used to represent quantity or volume when there are more data points than can reasonably be shown in a bar chart.

Horizontal bar charts

Also referred to as a ranked list, horizontal bar charts are best for showing the top N of a list of dimensions. These may be individual categories or records such as user names.

Vertical column charts

These charts are used to display the distribution of data, such as a histogram. Use when there are few data points. Otherwise, consider an area chart.

Dot plots

These charts show dimensions (persons, cadences, templates, etc.) plotted on a single axis compared to each other. An example is in the activity summary on an individual's coaching page.

Scatter plots

These charts plot a dimension across two metrics on the x- and y-axis.

Bubble plots

These charts plot a dimension across three metrics on the x-axis, y-axis, and size of the bubble.

Additional elements

Comparisons help answer the question "So what?" We should support multiple different data comparisons, such as:

  • Period: week over week, month over month, quarter over quarter, and more

  • Peer: comparison to team average or median

  • Average: comparison to a user or team's historical average

  • Binned Group: comparison of user's group, e.g. activities per day, to other groups

  • Benchmark: comparison to an industry or role-based benchmark

Other elements that guide and help users engage with visualization data.

  • Popovers should be used to provide clarity on the focused metric and as a way to get more information. In some cases, it may make sense to use the tooltip to show a secondary dimension.

  • Filters are used to set constraints to narrow down the amount of data represented in a chart, table, or dashboard.

  • Legends help explain the chart. They should be consistent in placement and alignment. When possible, consider labeling the data to avoid the use of legends altogether.

  • Summaries are blocks of generated text used to offer high-level details and guidance about sets of data.

Color palettes

Salesloft's data visualization color palettes are designed to maximize clarity and accessibility.

Categorical palette

Categorical data visualization color palette

Use the categorical palette to distinguish individual series of data. This palette should use the exact colors and sequence outlined below. It has been carefully designed to maximize contrast and accessibility.

Sequential palette

Sequential data visualization color palette

The sequential palette is monochromatic and intended to show scales of items. Darker colors should be used to represent larger values.

Divergent palette

Divergent data visualization color palette

The divergent palette is used show scales that are both higher and lower than zero. Darker colors should be used to represent larger values.

Resources