Data Visualization

Use this data visualization style guide to create a uniform look and feel to all of If's charts and graphs. This page contains guidelines that are in line with data visualization best practices and proven design principles. It also eliminates the burden of design and color decisions when creating charts.

The data visualisations are meant to visualise data in a intuitive and visually appealing way.

Table of Contents

Edit this section, Opens in new window

Colors

When selecting colors for charts and graphs, we must first consider the type of data we are presenting. Usually, data can be grouped into one of two main groups: categorical or sequential.

Categorical palettes are best when you want to distinguish discrete chunks of data that do not have an inherent ordering.

Sequential color mapping is appropriate when data range from relatively low or uninteresting values to relatively high or interesting values. For sequential data, it's better to use a palette that has a relatively subtle shift in hue accompanied by a large shift in brightness and saturation.

This approach naturally draws the eye to the relatively important parts of the data. Sequential colors are used for sequential groups (not necessarily the way the data trends). So age groups young to old and date ranges might be something that use sequential colors.

Note: BL 1, BLUE should be used sparingly, as this color should be considered for highlighting purposes (such as drawing attention to a certain category or indicating a trend line).

The following color combinations are intended to take some of the guess work out of the process of assigning colors to charts. They're only examples, and can be mixed-and-matched depending on the story you are trying to tell with your data.

When comparing data by gender do not use blue to represent men and pink to represent women. Instead, choose a color combination like yellow and blue, or another combination of our main infographic colors.

Color combinations

Chromatic

Main infographic colors

CG 3
CG 2
CG 1
CY 3
CY 2
CY 1
CR 3
CR 2
CR 1
CB 3
CB 2
CB 1

CG 2, GREEN, CY 2, YELLOW, CR 2, RED and CB 2, BLUE are the primary colors to be used.

CG 1, DARK GREEN, CY 1, DARK YELLOW, CR 1, DARK RED and CB 1, DARK BLUE, CG 3, LIGHT GREEN, CY 3, LIGHT YELLOW, CR 3, LIGHT RED and CB 3, LIGHT BLUE are the secondary colors to be used.

const infographicColors = [
  '#87c7ba',
  '#fcc74f',
  '#ff8569',
  '#4cb0d3',
  '#6b9994',
  '#b08759',
  '#805c5c',
  '#5392b2',
  '#b5ede8',
  '#ffe082',
  '#ffc9a6',
  '#97e2f7'
];

Monochrome

These colors are NOT meant to be used anywhere else but in charts!
const colors = ['#e2dfde', '#c5c0be', '#a8a09e', '#8b817e', '#6e625e', '#584e4b', '#423a38', '#2c2725', '#151312'];

Groups

When visualizing data, you can choose a predefined set of colors to use for grouping.

One group
CG 2
CY 2
CR 2
CB 2

For one color group, you can choose freely from the 4 primary infographic colors.

Name Value
$color-data-chromatic-red
#ff8569
$color-data-chromatic-yellow
#fcc74f
$color-data-chromatic-green
#87c7ba
$color-data-chromatic-blue
#4cb0d3
Two groups

For two color groups, you can use these color combinations.

Name Value
$color-data-chromatic-green
#87c7ba
$color-data-chromatic-yellow
#fcc74f
Name Value
$color-data-chromatic-red
#ff8569
$color-data-chromatic-blue
#4cb0d3
Name Value
$color-data-chromatic-green
#87c7ba
$color-data-chromatic-red
#ff8569
Sequential

Use one of the primary infographic colors and pair it with the matching lighter secondary color.

Name Value
$color-data-chromatic-light-green
#b5ede8
$color-data-chromatic-green
#87c7ba
Name Value
$color-data-chromatic-light-yellow
#ffe082
$color-data-chromatic-yellow
#fcc74f
Name Value
$color-data-chromatic-light-red
#ffc9a6
$color-data-chromatic-red
#ff8569
Name Value
$color-data-chromatic-light-blue
#97e2f7
$color-data-chromatic-blue
#4cb0d3
Highlighting
BE 3
BL 1
BE 2
BL 1
BE 1
BL 1
BE 3
CG 2
BE 2
CG 2
BE 1
CG 2

If your visualization is for highlighting a value, you can use our background-colors BE 5, LIGHTEST BEIGE - BE 3, LIGHT BEIGE and pair it with our accent color or CG 2, GREEN. However, the background color used should be clearly distinct from the background color of the visualization.

Caution! Be careful when using the beige colors, and make sure the contrast is good enough with background colors.
Name Value
$color-data-subtle-100
#f1ece8
$color-data-highlight-blue
#0054f0
Name Value
$color-data-subtle-100
#f1ece8
$color-data-chromatic-green
#87c7ba
Name Value
$color-data-subtle-200
#ede6e1
$color-data-highlight-blue
#0054f0
Name Value
$color-data-subtle-300
#e8e0d9
$color-data-highlight-blue
#0054f0
Three groups

For three color groups, you can use these color combinations.

Name Value
$color-data-chromatic-green
#87c7ba
$color-data-chromatic-yellow
#fcc74f
$color-data-chromatic-red
#ff8569
Name Value
$color-data-chromatic-green
#87c7ba
$color-data-chromatic-red
#ff8569
$color-data-chromatic-blue
#4cb0d3
Sequential

Use one of the primary infographic colors and pair it with the lighter and darker versions.

Name Value
$color-data-chromatic-light-green
#b5ede8
$color-data-chromatic-green
#87c7ba
$color-data-chromatic-dark-green
#6b9994
Name Value
$color-data-chromatic-light-yellow
#ffe082
$color-data-chromatic-yellow
#fcc74f
$color-data-chromatic-dark-yellow
#b08759
Name Value
$color-data-chromatic-light-red
#ffc9a6
$color-data-chromatic-red
#ff8569
$color-data-chromatic-dark-red
#805c5c
Name Value
$color-data-chromatic-light-blue
#97e2f7
$color-data-chromatic-blue
#4cb0d3
$color-data-chromatic-dark-blue
#5392b2
Four groups

For four color groups, you can use this color combination.

Name Value
$color-data-chromatic-green
#87c7ba
$color-data-chromatic-yellow
#fcc74f
$color-data-chromatic-red
#ff8569
$color-data-chromatic-blue
#4cb0d3
Sequential

Use a combination of our monochrome colors.

Name Value
$color-data-monochrome-100
#e2dfde
$color-data-monochrome-300
#a8a09e
$color-data-monochrome-500
#6e625e
$color-data-monochrome-700
#423a38
Five groups

For five color groups, you can use this color combination.

Name Value
$color-data-chromatic-green
#87c7ba
$color-data-chromatic-yellow
#fcc74f
$color-data-chromatic-red
#ff8569
$color-data-chromatic-blue
#4cb0d3
$color-data-chromatic-dark-red
#805c5c
Sequential

Use a combination of our monochrome colors.

Name Value
$color-data-monochrome-100
#e2dfde
$color-data-monochrome-200
#c5c0be
$color-data-monochrome-300
#a8a09e
$color-data-monochrome-400
#8b817e
$color-data-monochrome-500
#6e625e
Six groups

For six color groups, you can use this color combination.

Name Value
$color-data-chromatic-green
#87c7ba
$color-data-chromatic-yellow
#fcc74f
$color-data-chromatic-red
#ff8569
$color-data-chromatic-blue
#4cb0d3
$color-data-chromatic-dark-yellow
#b08759
$color-data-chromatic-dark-red
#805c5c
Sequential

Use a combination of our monochrome colors.

Name Value
$color-data-monochrome-100
#e2dfde
$color-data-monochrome-200
#c5c0be
$color-data-monochrome-300
#a8a09e
$color-data-monochrome-400
#8b817e
$color-data-monochrome-500
#6e625e
$color-data-monochrome-600
#584e4b
Seven groups

Consider consolidating categories or breaking up the chart, seven groups are really too many.

Edit this section, Opens in new window

Types

Geo charts

When using geo charts as a visualization tool:

  • Make non-important countries a lighter beige to let the coloured countries stand out
  • Do not display borders, rivers, lakes, poi's and roads
  • Make sure you always have a legend present

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus gravida lectus vitae luctus. Praesent a nunc sit amet risus vulputate accumsan.

screenshot of a geo chart

Combinations with charts

You can also combine a geo chart with other visualization types, like infographics or charts.

screenshot of a geo chart

Infographic

Info box data highlight

This data visualisation is a basic info box, but instead of showing body text here, we highlight a certain number, with supporting text below the data.

This is always placed on the right of body text module.

2 000 000SEK New customers throughout the fiscal year 2019 and 2020

Highlighted values

Highlighted values data visualisation is very much alike the Quick Facts, but here we work with data as the main focus. Supporting text under the respective numbers is to describe eventual data.

There is also support to highlight data extra much with the use of our active blue color. Do not overuse this.

There is also support for a hierarchal approach to this component which involved one line with larger data and another with smaller data below.

86% Text to explain the number above
9,1 Text to explain the number above

Charts

Spline

A spline chart is a line chart in which data points are connected by smooth curves: this modification is aimed to improve the design of a chart. Like the regular line chart, it is commonly used to emphasize trends in data over equal time intervals.

Usage
  • To show the trend in one variable, usually over time.
  • To show multiple variables with multiple lines (if they are on the same scale).
  • To show the same variable for multiple observations with multiple lines.
Styling
  • The y-axis should always start at zero.
  • When possible, directly label series. If too close together, use a legend.
  • Avoid individual data markers.
  • Avoid dashed lines.
  • In a single chart, try to keep the maximum number of lines to three or four. More is not always better. Plotting too many lines on the same chart gives a confusing picture and defeats the purpose.
  • Sequential series should be shaded from lightest to darkest for easy comparison.
Positioning

This data visualisation can either be full width or placed to the right of body text component, or to the left with a legend on the right.

For basic legends, legend can be placed inside the chart (for example if there are two years in the legend only).

If P&C Insurance Ltd
Competitors

This version has dots for for the data point entry.

Horizontal bars

Horizontal Bar graphs are used to compare things between different groups or to track changes over time. However, when trying to measure change over time, bar graphs are best when the changes are larger.

This data visualisation can either be full width or placed to the right of body text component, or to the left with a legend on the right.

Usage
  • To show the trend in one variable, usually across a number of categories.
  • To show multiple variables with multiple bars(if they are on the same scale).
  • To show the same variable for multiple observations with multiple lines.
Styling
  • The y-axis should start at zero (there are a few instances when it is okay for the y-axis not to start at zero).
  • Axis labels should always be horizontal. If you have long labels, consider making a horizontal bar chart instead of a column chart.
If P&C Insurance Ltd
Thick comparison

Same basic function as horizontal bars, but here we only compare two numbers, usually of the same data, but before or after a change, or comparing two different data points during the same time.

Here we also highlight how much larger the above value is with the use of for example "3.2x (larger)".

There is also a choice for a small legend under each thick bar, this is to let the user know what the data is showing, for example If vs competitor. Not to be used for anything longer than 2-3 words.

This data visualisation can either be full width or placed to the right of body text component

Bars/Columns

A bar chart is used when you want to show a distribution of data points or perform a comparison of metric values across different subgroups of your data. From a bar chart, we can see which groups are highest or most common, and how other groups compare against the others.

This data visualisation can either be full width or placed to the right of body text component, or to the left with a legend on the right.

Bars can also do divided into multiple sections with each section being a different color to represent different data. There can also be sections of bars that are fitted closer together.

Usage
  • For mostly for one variable
  • To compares numerical values for different observations
  • To show relative amounts
  • To break one numerical variable out into different subgroups with grouped or stacked bars or columns
Styling
  • If all the bars measure the same variable, make them all the same color. Different shades have no relevance to the data.
  • If you are showing fewer than 10 bars, consider eliminating the horizontal gridlines and y-axis line and directly labeling the data points.
  • To differentiate subsets of data, projections, or averages, consider using a different color shade or gray.
  • Legends should be stretched across the top of the chart and the order should match the order in the chart.
  • Sequential series should be shaded from lightest to darkest for easy comparison.

Pie

Browser market share if.ee
Chrome
Safari
Firefox
Edge
Internet Explorer
Opera
Other
Usage
  • Use them sparingly. Often a bar or column chart is better. It is difficult to visually judge the size of circles (or circle segments). These segments are easier to discern as rectangles on a scale.
  • Use pie charts when you want to show the relative relationship between two or three things
  • When they add up to 100 percent (which may necessitate the inclusion of a category such as "none", or "other").

Pie charts are generally used to show percentage or proportional data and usually the percentage represented by each category is provided next to the corresponding slice of pie. Pie charts are good for displaying data for around 6 categories or fewer.

This data visualisation is to be placed to the right of body text component, or to the left with a legend on the right.

Cautions about pie charts

The debate concerning the effectiveness of pie charts is among the most contentious in the field of data visualization. Many people love pie charts—they are familiar, easily understood, and present "part-to-whole" relationships in an obvious way. But others argue that because pie charts force readers to make comparisons using the areas of the slices or the angles formed by the slices—something that our visual perception does not accurately support—they are not an effective way to communicate information.

Pie chart slices that form 90-degree right angles—that is, slices that form one-quarter increments—are the most familiar to our eyes. Other amounts are more difficult to discern. For that reason, a column or bar chart is preferable in most cases.

The current thinking is pretty much summed up by this tweet from data visualization pioneer Edward Tufte:

“Pie chart users deserve same suspicion+skepticism as those who mix up its/it's, there/their.To compare,use little table, sentence, not pies.”

—Edward Tufte

That's not to say that pie charts don't have a place when communicating research. They're OK to use when the number of slices are fewer than four or five— and when you're trying to tell a clear 'part-to-whole' story about a single slice.

Doughnut

Doughnut charts are used to show the proportions of categorical data, with the size of each piece representing the proportion of each category. Make sure that there are not too many slices.

This data visualisation is to be placed to the right of body text component, or to the left with a legend on the right.

Edit this section, Opens in new window

Usage

Use data visualisation in any scenario where there is data that can be supported or better explained / visualised with a visual cue.

Data visualisation components should be used on the same backgrounds that body text components are used. This means that they do better on BE 5, LIGHTEST BEIGE to BE 3, LIGHT BEIGE, but are compatible with all backgrounds.

Principles

Sizing

Charts with natural large data-sets, like spline/column and bar can be full width.

Positioning

All charts can be placed to the right of body text component, or to the left with a legend on the right.

CHART HERE
LEGEND HERE
BODY TEXT HERE
CHART HERE
LEGEND HERE
BODY TEXT HERE
CHART HERE
CHART HERE
LEGEND HERE
CHART HERE
LEGEND HERE
CHART HERE
LEGEND HERE
Edit this section, Opens in new window

Behaviours

Data loads the second that its visible for the user one the page, ease in and ease out for the loading so they are smooth and gentle, but not too slow. Should be finished loading the second the user can decipher the data.

Interaction

Some data visualisations support interactions, whether that is directly, or a scenario where the user can change which data set the chart should show, eg. Changing which year the data visualisation is showing data from.

Usually this is below the data visualisation.

If the interaction can fit on one line, they are designed as a tab, with a uniform line under. If they need to be placed on multiple lines, underline each clickable selector instead, with blue line and bolded text for the current one.

If there is a need to show multiple data visualisations and the user should be able to toggle different years (for example) for all data visualisations, there is an option to put the interaction under the page title, and apply the change to all data visualisations.

Show visual example of this.

Edit this section, Opens in new window

Accessibility

User can either hover or click on part of data to get further info, colors are also tested for accessibility, and there is also an option that when is enabled in browser, we show patterns instead of color.

Tables

If the data visualization is for information and not decorative/fill material, there should always be possible to view the data set as a table. It is also required to be able to export that table accordingly.

Jane John Lisa
Apples 3 4 7
Pears 2 0 4
Plums 5 0 11
Bananas 1 12 1
Oranges 2 4 7
Data visualiation based on a table

This data visualization is accompanied by a table for the information to be accessible. The data in the data visualization is exported from the table, so it acts like a progressive component.

Color and accessibility

Color with patterns

To be able to distinguish colors in charts for color blindness or visual impairment, patterns could be used.

CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
Patterns without color

When used without different background-colors, a default background-color (dark) should be set.

Patterns with color

Color blindness tests

Here is a selection of 8 color blindness variations of the main infographic colors used here.

This is just an approximation of the color blindness types, but it's the best approximation out there.

Protanopia
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
With patterns
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
Protanomaly
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
With patterns
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
Deuteranopia
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
With patterns
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
Deuteranomaly
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
Tritanopia
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
Tritanomaly
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
Achromatomaly
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
Achromatopsia
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
With patterns
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
Moderate vision loss
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
With patterns
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
Severe vision loss
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
With patterns
CY 2
CG 2
CR 2
CB 2
CY 1
CG 1
CR 1
CB 1
Edit this section, Opens in new window

Anatomy

There is currently no documentation for this section yet.
Contact the Design System team for questions.

If you want to contribute, you can also add the documentation yourself!

Typography

Typeface Font-size Font-weight Color
Title If Sans 1.5rem 64 BR 1, BROWN
Subtitle If Sans 1rem 82 BR 1, BROWN
Y and X-axis labels If Sans 14px 78 LB 1, LIGHT BROWN

Tooltip

Tooltip to show further info about data is activated on hover on desktop or click on mobile.

The popover component design is used with charts.

Legend

A legend is always recommended to use with all graphs where data is hard to understand.

In cases where there is an interaction, make sure that the data is somewhat easy to understand before letting the user interact with it. It is not optimal, but interactions and legend can be placed together. Interaction is always closest to data, legend below in mobile or to the side in desktop.

33%
If P&C Insurance Ltd
67%
Competitors

Variations

Type Purpose
Dot A legend with dots
Line A legend with lines

Usage

Types

A legend can be marked with a symbol/color, relating the legend item to the visualization.

This could either be a filled circle (dot), or a thick line.

Tranquil Teal
Fresh Salmon
Market shares

Att flytta pensioner i allmänhet och tjänstepensioner i synnerhet kan vara både krångligt och tidskrävande.

2020
Legends can contain descriptive text and a title.
Sizing

The legend should follow the layout principles from the grid, and there are 4 sizes available to use.

  1. 6 cols (50%)
  2. 5 cols
  3. 4 cols (30%)
  4. 12 cols (100%)
Positioning

The legend should always be positioned accordingly; either to the right/left of the chart, or below the chart.

CHART HERE
33%
If P&C Insurance Ltd
67%
Competitors
CHART HERE
33%
If P&C Insurance Ltd
67%
Competitors
CHART HERE
33%
If P&C Insurance Ltd
67%
Competitors
33%
If P&C Insurance Ltd
67%
Competitors
CHART HERE
33%
If P&C Insurance Ltd
67%
Competitors
CHART HERE
33%
If P&C Insurance Ltd
67%
Competitors
CHART HERE
CHART HERE
33%
If P&C Insurance Ltd
67%
Competitors
33%
If P&C Insurance Ltd
67%
Competitors
33%
If P&C Insurance Ltd
67%
Competitors
33%
If P&C Insurance Ltd
67%
Competitors
Edit this section, Opens in new window
Contact us, Opens in new window