Data visualization

Usage

Data visuals are designed to make it easy to compare data and use it to tell a story – both of which can help users in decision-making. This allows users to digest, visualize and see trends in their data.

Principles

The data visualization process always begins with a set of data, a question, and an analysis of the data to find the answer. Each visualization should focus on answering a single question about the dataset. For example, “What are my sales over time?”

Data visualizations should be approached by:

Types

The following are the basic types of data visualizations. For detailed documentation on Data visualization, view design specs

Booster supports column, line, bar, display, pie, donut, and heatmap charts. When choosing a chart type, consider your data set and what you want to convey about the data.

Changes over time

A change over time, comparisons, and trends, consider a line or vertical column chart.

Common use cases include:

• Quote volume in the past 90 days
• Sales closed per agent

Category & ranking comparison

A comparison between distinct categories, consider a horizontal bar or horizontal grouped bar chart.

Common use cases include:

• Quote volume by office
• Top-selling products

Part to whole

A comparison of proportions of a whole or how partial elements add to a total, consider a donut, pie or stacked chart.

Common use cases include:

• Bridged to bound quotes

Display

A quantifiable measure that is used to track and display the status of a specific process. Examples include a sum, an average, or a movement in a positive or negative direction, consider a display metric.

Common use cases include:

• Total quote volume

Spatial

A visualization to quickly understand data across both space and time on a geographic region, consider a heatmap

Common use cases include:

• Geographical: Quote volume by zip code

Layout & structure

Putting all of the components together in the right layout is essential for a user to digest and analyze the data efficiently. This includes:

1. Title: A clear, actionable title that will help users understand what exactly they looking at. Example: Quote volume by office - Top 10.
2. Data visual: Consider your data set and what you want to convey about the data when selecting a data visual.
3. Axis: Most charts should have at least 1 axis line which should be used as a guideline yet be unobtrusive
4. Axis labels: Axis lines should be labeled for clarity.
5. Controls (optional): Charts can have various controls. Example: Favorite, Expand, filter
6. Annotation (optional): Highlights data points and data outliers.

1. Subtitle (optional): Provides context for the title.
2. Legend (optional): Some chart elements may need more context with labels.

For detailed documentation on Data visualization, view the design specs.

Line charts

Line charts are used to show change over time, comparisons, and trends. Use line charts when the number of data points is more than 30. For detailed documentation on line charts, view the design specs

Legend

Be sure to include a categorical color legend if comparing more than one data point. Sometimes direct labeling can be used if data is less dense. On desktop, a legend should be positioned below a chart. On mobile, place the legend above the chart to keep it visible during interactions.

Annotation

By hovering over data points, we emphasize key data points, data outliers, and any noteworthy content, allowing for quick access to valuable insights.

Use categorical colors and line style

Each line should have a unique color and line style. Limit the number of colors and line styles (dimension values) to no more than 4. Review Color for data visualizations for more about choosing colors for line charts.

The lines should be applied in sequence strictly as described below. The sequence is carefully curated to maximize contrast between neighboring lines to help with visual differentiation.

Best-practices

Bar charts

Line charts are used to compare different values that are hierarchically equivalent. In bar graphs each variable should consistently be represented using one color. Multiple colors can be used if there is more than one variable, but each variable has its own color. For detailed documentation on bar charts, view the design specs.

Vertical column charts

Vertical column charts are used to show change over time, trends, and individual data points. Use column charts for when the number of data points is fewer than 30, or else use a line chart.

Horizontal bar charts

Vertical column charts are used to show change over time, trends, and individual data points. Use column charts when the number of data points is fewer than 30, or else use a line chart.

Stacked bar charts

Stacked bar charts use color to show an additional dimension. To do this, each bar is split into a set of dimension items, distinguished by color, while maintaining the total bar height. Review Color for data visualizations for more about choosing colors for stacked bar charts.

Annotation

By hovering over data points, we emphasize key data points, data outliers, and any noteworthy content, allowing for quick access to valuable insights.

Best-practices

Donut and pie charts

Donut and pie charts express portions of a whole, using arcs or angles within a circle. Use donut and pie charts to show partial elements that add up to a total. They can become difficult to understand when they include many segments. Try to use 2-3 segments, if possible, and no more than 5. For detailed documentation on donut and pie charts, view the design specs.

Legend

Be sure to include a categorical color legend. Sometimes direct labeling can be used if data is less dense. A legend should be positioned to the right of a donut chart, but if there is not enough horizontal space, it can be placed below the chart.

Annotation

By hovering over data points, we emphasize key data points, data outliers, and any noteworthy content, allowing for quick access to valuable insights.

Best-practices

Display metrics

Display metrics are used to show a single value with a base unit. Metrics should be scoped to indicate the timeline of the data. Consider including a comparison indicator such as a comparison to the previous time or average. For detailed documentation on display metrics, view the design specs.

Movement

Display metrics are usually combined with other visual elements for clearer communication. These can include bar charts, line charts, icons, and deltas.

Heatmap

Heatmaps associate a color with a value over a geographic region rather than a strict grid such as a heatmap. Metrics should be scoped to indicate the timeline of the data. Consider including a comparison indicator such as a comparison to the previous time or average.

Dashboards

In addition to choosing the right chart type, it's important to consider the layout of your dashboard. Dashboards can better help communicate a story rather than one complex chart. Dashboards are a collection of multiple separate charts on a screen. For detailed documentation on dashboards, view the design specs.

Designing a dashboard

A dashboard's purpose should be reflected in its layout. The design of the dashboard should suit how it will be used, whether it's a tool for deeply exploring data or answering predefined questions. The layout plays a critical role in conveying information effectively. To ensure that users can quickly grasp the key insights while still having access to supporting data, follow these best practices for arranging your dashboard elements:

1. Emphasized data / less specific: The dashboard layout should emphasize critical information by positioning charts with significant relevance at the top. This could encompass attention-worthy elements or provide a summarized overview.
2. Supporting Data / more specific: The subsequent layer can incorporate deeper insights and underlying factors that substantiate the emphasized data.
3. Supplementary Data / most specific: The final layer may encompass more specific data that provides additional reinforcement for the information presented at the top.

Here are some best practices for creating effective data visualization layouts:

• Group related charts together: Place charts that are related or have a similar purpose close to each other.
• Use hierarchy to portray significance: Place charts with high importance but less specificity towards the top and charts with less importance but more specificity towards the bottom.
• Use consistent colors and typography: Use the design system's color and typography guidelines to ensure consistency and readability.
• Consider the user's workflow: Design the layout to match the user's workflow and the tasks they need to accomplish.
• Provide context: Provide additional context or explanations for complex data points, so that users can understand the meaning behind the data.

Behavior

Drilling down

Drilling down into information means allowing users to interact and explore the data in more detail. Users gain a deeper understanding of specific data points, enabling them to make more informed decisions and identify trends that may not be immediately apparent at a higher level.

The drilling down process initiates when a user clicks on a specific data point in a chart, triggering a seamless transition to a dedicated page with expanded insights. By isolating specific data points, users can perform detailed analysis without distraction, ensuring a thorough examination of the selected metric.

Upon clicking a data point, users are seamlessly directed to a new page exclusively focused on presenting comprehensive information related to their selection. This dedicated page offers a concentrated view of the data point's context, contributing factors, and any relevant metrics.

Here are some best practices for implementing drilling down:

• Keep it simple: Don't overwhelm the user with too many options or levels of detail.
• Provide context: Make sure the user understands where they are and what they are looking at before offering the option to drill down.
• Use breadcrumbs: Provide a clear path for the user to follow back to the original view.
• Offer clear labels and descriptions: Use descriptive labels and tooltips to help the user understand what they are looking at.

Filtering

The placement of the filters on the dashboard depends on the specific use case and the number of charts on the page.

The decision on where to place the filters should be based on the needs and preferences of the users, as well as the overall design and layout of the dashboard. The goal is to make the filters easily accessible and intuitive to use, so users can quickly adjust them and get the insights they need. For detailed documentation on filtering, view the design specs.

Global filters

Global filters allow users to adjust the filters for all charts at once. They should appear at the top of the page.

Individual chart filters

Individual chart filters allow users to adjust the filters for a specific chart without affecting the others.

Color for data visualizations

The color palettes for data visualizations are based on accessibility guidelines to ensure that all users, including those with color blindness or visual impairments, can perceive the presented information. Appropriate use of color for data visualization allows interrelationships and patterns within data to be easily observed.

When choosing a color palette, consider your data set and what you want to convey about the data.

Qualitative color palette

A qualitative palette is used when the variable is categorical in nature. Examples include country or state, race, and gender. Each possible value of the variable is assigned one color from a qualitative palette.

Sequential color palette

A sequential color palette is used when the variable is numeric or ordered values. Colors are assigned to data values in a continuum, usually based on lightness, hue, or both.

Binary color palette

A binary color palette is used when the variable is a comparison of two categories. A common use case is to show hierarchy. The primary difference between the two categories of a binary scheme may be lightness.

Qualitative color palette

A qualitative palette is used when the variable is categorical in nature. Examples include country or state, race, and gender. Each possible value of the variable is assigned one color from a qualitative palette.

The colors of this palette should be applied in sequence strictly as described below. The sequence is carefully curated to maximize contrast between neighboring colors to help with visual differentiation.

To ensure accessibility, line charts should utilize darker shades of color. The colors of this palette should be applied in sequence strictly as described below. The sequence is carefully curated to maximize contrast between neighboring colors to help with visual differentiation.

Sequential color palette

A sequential color palette is used when the variable is numeric or ordered values. Colors are assigned to data values in a continuum, usually based on lightness, hue, or both.

The most prominent dimension of color for a sequential palette is its lightness. Typically, lower values are associated with lighter colors, and higher values with darker colors.

Binary color palette

A binary color palette shows differences that are divided into only two categories. The primary difference between the two categories of a binary scheme may be a lightness.

A common use case for a binary color palette is to convey hierarchy. The contrast puts emphasis on an area of focus, when it is used sparingly.

Responsiveness

Ensuring data visualizations are responsive is crucial for providing a seamless user experience across various devices and screen sizes. Responsive design allows data to be easily accessible and comprehensible, regardless of the user's device. Fluid layouts enable dashboards to adapt to different screen sizes. Elements should resize and reposition dynamically to optimize space.

Consider using a more mobile-friendly data visualization format when designing for responsiveness. For example, consider presenting data in a horizontal bar chart rather than a line chart. It’s essentially the same graphic, only the axes are flipped. It still tells the same story, just in a more mobile-friendly vertical format.

Instead of a line chart, the mobile view presents users with a horizontal bar chart. It’s essentially the same graphic from the desktop, only the axes are flipped. It still tells visitors the same story, just in a more mobile-friendly vertical format.

Alternate considerations

• Use a table when multiple metrics and categories need to be presented together, and an accurate lookup of the data values is more important than showing patterns in the data.