Sections
Data visualization
Tell a story with data visualizations. Use this section for guidance and examples.
Guidelines
Section titled GuidelinesWhy 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:
Focus
Section titled FocusDesigns 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?
Explicit
Section titled ExplicitDesigns 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.
Purpose
Section titled PurposeDon’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 types
Section titled Chart typesThere 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.
Comparison
Section titled ComparisonThis 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-whole
Section titled Part-to-a-wholeUses 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.
Correlations
Section titled CorrelationsShows 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 time
Section titled Trend over timeAnalyze 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 usage
Section titled Color palette and usageWhat 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.
Green
Section titled GreenUseful for denoting positive related metrics.
Using for denoting negative metrics.
Multi-colored
Section titled Multi-coloredUseful for denoting unrelated metrics.
Accessibility
Section titled AccessibilityIt’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 & inspirationHere are some links to help you learn more about data visualization.