Tell a story with data visualizations. Use this section for guidance and examples.
GuidelinesSection titled Guidelines
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:
FocusSection titled Focus
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?
ExplicitSection titled Explicit
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.
PurposeSection titled Purpose
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?
Chart typesSection titled Chart types
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.
ComparisonSection titled Comparison
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.
Part-to-a-wholeSection titled Part-to-a-whole
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.
CorrelationsSection titled Correlations
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.
Trend over timeSection titled Trend over time
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.
Color palette and usageSection titled Color palette and usage
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.
GreenSection titled Green
Useful for denoting positive related metrics.
Using for denoting negative metrics.
Multi-coloredSection titled Multi-colored
Useful for denoting unrelated metrics.
AccessibilitySection titled Accessibility
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 & inspirationSection titled Sources, resources & inspiration
Here are some links to help you learn more about data visualization.