Data visualization is the graphical representation of information. Data visualizations surface insights from datasets to tell a story.
- 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.
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. For example, test with one or two data points as well as hundreds and test low and 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.
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
- 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, …".
role="presentation"on shapes such as an SVG
rectelement 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
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
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 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.
We often used a stacked bar to represent likert scales. Learn more in Visualizing Likert Scale Data: Same data, displayed seven different ways by Alana Pirrone.
Learn more about bar charts:
- Data viz project: Bar Chart (Horizontal)
- Data viz project: Stacked Bar Chart
- The Data Visualisation Catalogue: Bar Chart
- Shopify Polaris: horizontal bar charts
- Shopify Polaris: vertical column charts
- Morningstar: horizontal bar chart
- Government of Canada, Aurora: Bar charts
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:
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.
- 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.
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