Culture Amp
Menu

Data Visualization

Data visualization is the graphical representation of information. Data visualizations surface insights from datasets to tell a story.

Also known as:
Data vizDataChartsGraphicsBusiness intelligenceInfographicsGraphsDiagramsHero data

AnchorNeed to know

  • Provide an overview first, zoom and filter, then details on demand.
  • Test visualizations with real data.
  • Let people explore data themselves to discover their own insights.
  • Provide text alternatives to charts, such as a data table.

To keep in mind

Charts, diagrams, and hero data draw attention to insights and help people make sense of complex information. They provide answers to questions that people can act on.

  • Test with real data:
    • Where possible, use observed data to test designs.
    • Test designs that need to represent zero or have absent data.
    • Test designs with one or two data points as well as hundreds.
    • Test designs with extremes, such as very low and very high numbers.
  • Answer one question at a time. Avoid overloading charts with information to solve multiple problems.
  • Provide "Overview first, zoom and filter, then details-on-demand". Read more in 3 rules for Interactive data visualization by Vlad Kozhevnikov.
  • Provide text alternatives, such as a data table, for any non-text content. This ensures it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Accessibility

For nearly all charts, you must consider the following:

  • Provide a text alternative, such as a data table. To link a chart with its text alternative, you might wrap them both in a <figure> element or provide a text link to an adjacent long description. To learn more, read Web Accessibility initiative: Complex Images.
  • Shapes such as bars in a bar chart that are required to understand the content must have sufficient contrast with the background for "graphical objects" (e.g. greater than 3:1 contrast ratio). See our color guidelines for details.
  • Text color must have sufficient contrast with the background. See our color guidelines for details.
  • Color must not used as the only visual means of conveying information. Consider using changes in contrast and patterns in bars or lines.
  • Ensure SVG elements have a <title> element that provides an accessible, short-text description.

Where applicable, you might consider the following:

  • If you're visually hiding a legend's title, add aria-label="Legend".
  • Check the reading order of ticks and data points for people using screen readers. For example, ensure they read as "Saturday: 42, Sunday: 31…" instead of "Saturday, Sunday, … 42, 31, …".
  • Use role="presentation" on shapes such as an SVG rect element to hide them from assistive technology where appropriate.

Learn more about accessible data visualization:

Line charts

We primarily use line charts to show trend over time. They can be used to show distribution and comparisons too. A line chart shows the evolution of one or several variables, such as favorability, with quantitative values, such as 75%, over a continuous interval or time period, such as 3 years.

  • Avoid overplotting, which can lead to a crowded spaghetti plot.
  • Avoid misleading curves between points, as described in Let’s Chart: stop those lying line charts by Noah Lorang.
  • Show visible dots for each data point to clarify when data was measured on a line. You may need to avoid showing the individual dots if there are so many that it becomes crowded.
  • Use solid lines for primary data and dotted lines for reference lines, such as predictions or benchmarks.

Learn more about line charts:

Scatterplots and bubble charts

A scatterplot shows points on X and Y axes representing two quantitative variables while a bubble chart shows a third numeric variable using bubble size. They are used to show correlation and distribution. Sometimes color is used to show an additional variable, such as sentiment.

  • For the size of bubbles, scale the bubble area and not its radius or diameter to the data.
  • Use transparent points or bubbles if they overlap.
  • Readability of point or bubble labels can be a challenge:
    • Label only the bubbles that tell the story. You might show the rest of the bubbles' labels on hover.
    • Truncate long labels e.g. with an ellipsis. You might show the rest of the label on hover.
    • Place the label in the center of the bubble.
    • Adjust font size according to bubble size. Again, you might show large text only on the bubbles that tell the story.
  • Use a "line of best fit" or a "trend line" to surface trends in the data.

Learn more about scatterplots:

Learn more about bubble charts:

Bar charts

Bar charts are used to compare discrete, numeric data across categories.

  • Order the bars. For example, you might use natural data order, such as months of the year, or rank them, ordering the bars from shortest to longest.
  • For long bar labels, consider using a horizontal bar chart or presenting the label on the bar.

Learn more about bar charts:

Stacked bar chart

A stacked bar chart is a bar chart that segments its bars, showing subgroups of the data. A 100% stacked bar chart shows the part-to-whole relationship in each bar, adding to 100% of the chart.

Single stacked bar

We often used a single stacked bar to represent the collective results of Likert scale responses. We sometimes refer to the single stacked bar specifically as the favorability bar.

Learn more in Visualizing Likert Scale Data: Same data, displayed seven different ways by Alana Pirrone.

Sparklines

A sparkline is a condensed, word-sized chart showing trend over time. It can be presented anywhere a word or number can, such as in a sentence, table, heading, graphic, or spreadsheet.

Sparklines are usually shown without axes or labels to focus on the shape of data. They're sometimes shown alongside hero data to provide additional context.

Multiple sparklines are often presented together as elements of a “small multiple” (a series of similar charts using the same scale, each showing a different facet, allowing easy comparison).

  • When including accompanying hero data, use a dot on the sparkline to show which data value is highlighted.
  • Consider labeling one or two data points, such as peaks.
  • Consider including a reference line to give context to the sparkline data and its shape.

Learn more about sparklines:

Hero data

Hero data refers to prominent figures on a page that draw attention to individual values using proportionally larger type sizes. Use hero data to highlight a single value when it does not need context or comparisons.

  • Show a number and unit label
  • If you show an accompanying comparison indicator (such as an arrow) to indicate the direction the number is trending, provide further context elsewhere to describe the baseline it's compared to
  • See typography guidelines to learn more

Learn more about hero data:

Color

To indicate Sentiment, use:

  • Data Viz: Favorable $kz-var-id-data-viz-favorable for Positive sentiment.
  • Gray 100 or Gray 300 for Neutral sentiment.
  • Data Viz: Unfavorable $kz-var-id-data-viz-unfavorable for Negative sentiment.

To learn more about using color, see color guidelines.

When to use and when not to use

When to use
  • Use a data visualization to highlight interesting values.
  • Use a data visualization to summarize data.
  • Use a data visualization to solve valuable problems. Avoid using data visualization only for visual impact.
When not to use
  • Use a data table when a summary or data visualization will be insufficient. For example, where every value needs to be seen.

External links

Here are some examples from elsewhere: