Data visualization

Tell a story with data visualizations. Use this section for guidance and examples.

Why use data visualization? Charts, graphs, and visuals draw attention to the data. While raw data can be hard to understand, data visualization presents a compelling story that answers a specific question and can inspire action. When presenting data through visualizations, keep the following principles in mind:

Designs should immediately draw the viewer’s eye to the most important information. That’s why the most important data should have the highest contrast. As you design, consider how much attention the data warrants—is it the main focus or just a supporting asset?

Designs should be easy to understand and accessible to all. Always use real data that’s represented accurately. Consider what range your data set has and how it will scale with more or fewer data points.

Don’t add extraneous data or ornamentation. Answer a single question with clear and accurate information. What’s the story you’re trying to tell?

There are many types of charts and graphs, so when you’re designing one, think first about its function. For example: are you comparing something? Or are you highlighting a trend over a long period of time? Below, we’ve grouped several types of charts according to their recommended functions (You’ll see some types in multiple groups). Before you start designing, determine what you’d like to communicate to your audience, and use that to guide you in selecting the appropriate chart or graph type.

This is the most common type of chart. Compare two or more values within two different parameters as the framework. This chart type helps to show differences/similarities between items and give context to the impact of those differences/similarities.

Bar chart
Bubble chart
Radar chart
Grouped bar chart
Stacked bar graph
Stacked area graph

Uses size or area to show how some group, entity, or amount breaks down into individual pieces that each represent a proportion of the whole. The data represented in these types of charts aren’t just about how things are divided, it’s about how they’re divided in relation to their whole and to each other. Each part (segment) of the chart represents data points that contribute to the whole and amount to 100% in total. This type makes it easier to identify equal or obviously different values.

Donut chart
Pie chart
Stacked area graph (100%)
Stacked bar graph (100%)
Treemap

Shows relationships and connections between the data or shows correlations between two or more variables. Often used as the first step toward the detection of cause-effect relationships. Use this type of chart to check whether there is any relationship between two variables and also to notice anomalies or clusters in the data.

Radar
Scatterplot

Analyze data over a time period as a way to identify trends or changes in values. Viewing data over time helps to understand performance, particularly when paired with an established target or goal. Use this type of chart to better understand how something is currently performing and to track any changes over time.

Area chart
Candlestick
Histogram
Line chart

What colors to use and when? Consider the following when choosing the primary color of your data visualization and in what order to add more colors:

Useful for denoting neutral related metrics.

#004487 blue-600
#0077cc blue-500
#379fef blue-400
#0095ff blue-400
#cfeafe blue-300
#f2f9ff blue-200

Useful for denoting positive related metrics.

#1e472c color-900
#29603b color-800
#2f6f44 color-700
#48a868 color-500
#a6d9b7 color-200
#eef8f1 color-025

Using for denoting negative metrics.

#7a1819 red-600
#ac2726 red-500
#d1383d red-400
#de535e red-400
#f4b4bb red-300
#fdf3f4 red-200

Useful for denoting unrelated metrics.

#27348b
#f2720c orange-400
#48a868 green-400
#379fef blue-400
#f7cc46
#fee3cf orange-300

It’s important to remember that you know more about the data than the target audience and that others may have a different set of constraints than you do. Make sure your data visualization is making the data clear and accessible to all by:

  • Having sufficient contrast with the background for any objects using colour (ex: dots, bars, lines, etc.).
  • Color must not be the only means of conveying information (consider adding labels).
  • Avoid overwhelming the user with too much information

Sources, resources & inspiration

Section titled Sources, resources & inspiration

Here are some links to help you learn more about data visualization.

Deploys by Netlify