Data Visualization
Data visualization is the graphical representation of information. Data visualizations surface insights from datasets to tell a story.
Need 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 SVGrect
element to hide them from assistive technology where appropriate.
Learn more about accessible data visualization:
- An intro to designing accessible data visualizations by Sarah L. Fossheim
- An introduction to accessible data visualizations with D3.js by Sarah L. Fossheim
- Accessibility at Penn State | Charts & Accessibility
- Accessible SVGs by Heather Migliorisi
- Web Accessibility initiative: Complex Images
- Functional Accessibility Evaluator 2.1: Long description for complex images
- Data Visualization Accessibility: Where Are We Now, and What’s Next? by Melanie Mazanec
- Writing Alt Text for Data Visualization by Amy Cesal
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:
- Data Viz Project: Line Graph
- The Data Viz Catalogue: Line Graph
- Data to viz: Line chart
- Data to viz: To Cut Or Not To Cut (the Y Axis)
- Lines in the Gallery notebook by Mike Bostock on Observable
- Shopify Polaris: line charts
- Morningstar: line chart
- Government of Canada, Aurora: Line graphs
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:
- Data Viz Catalogue: Scatterplot
- Data Viz Project: Scatterplot
- Morningstar: scatter plot
- Government of Canada, Aurora: Scatterplots
- Spectrum: scatter plot
- Predix: scatter
Learn more about bubble charts:
- The Data Viz Project: Bubble Chart
- The Data Visualisation Catalogue: Bubble Chart
- Carbon: Bubble Chart
- Morningstar bubble chart
- IBM: Bubble chart
- US Gov: Bubble Chart
- AntV: G2: Bubble
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:
- Data viz project: Bar Chart (Horizontal)
- The Data Visualisation Catalogue: Bar Chart
- Shopify Polaris: horizontal bar charts
- Shopify Polaris: vertical column charts
- Government of Canada, Aurora: 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.
- Data viz project: Stacked Bar Chart
- The Data Visualisation Catalogue: Stacked Bar Graph
- US Government: Stacked Bar Chart
- Liferay: Stacked Bar Chart
- Carbon design system: stacked bar charts
- Ant Design G2Plot: Stacked Bar 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:
- Data Viz Project: Sparkline
- Visualization Universe: Sparkline
- AntV: G2Plot: Sparkline
- Predix UI: Spark
- Spectrum: Sparkline
- US Government Data Visualization Standards: Small multiples
- Semiotic: 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:
- Seedling 400 for Positive sentiment.
- Ash for Neutral sentiment.
- Coral 300 for Negative sentiment.
To learn more about using color, see color guidelines.
When to use and when not 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.
- 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:
- Carbon: Data visualization chart types
- Ant Design: Visualization
- Morningstar: Charts
- Polaris: Data visualizations
- Government of Canada Aurora: Data Overview
- United States government: Data Visualization Standards
- Material: Data visualization
- Consumer Financial Protection Bureau: Data visualization guidelines
- Spectrum: Data visualization bar chart
- Liferay: Charts
- GitLab: Charts
- Opattern: how to use charts
- QuickBooks: Data visualization
- Predix: Data Visualization: bar chart
- IBM: Data visualization
- Visualizing Zero: How to Show Something with Nothing by Andy Kirk