Data Visualization
Data visualisations are meant to visualise data in a intuitive and visually appealing way.
Table of Contents
Edit this section, Opens in new windowOverview
As there are several frameworks and ways to implement data visualization, there are some components that could be useful when implementing charts or infographics.
Legends, Infographic text, to mention a few.
Legend
Positioning
The legend should always be positioned accordingly; either to the right/left of the chart, or below the chart.
Anatomy
- Symbol
- Value
- Name
Infographics
Info box data visualisation
Om du är 40 år och har 500 000 kr i upparbetat tjänstepensionskapital och sänker dina totala avgifter med 1 % så får du 1 117 222 kr mer i pension*. Bara sådär!
Att flytta pensioner i allmänhet och tjänstepensioner i synnerhet kan vara både krångligt och tidskrävande. För att en tjänstepension ska kunna flyttas behövs underskrift från firmatecknare på det bolag som en gång betalt in pengarna, även om du inte jobbar kvar där idag. Detta gör att många inte orkar fullfölja pensionsflytten då det helt enkelt är för mycket jobb. Underskrifterna måste dessutom vara i original och ibland även på särskilda blanketter som endast går att beställa via telefon hos det försäkringsbolag man vill flytta ifrån.
Anatomy
- Number
- Postfix
- Description
- Transparent box
- Highlighted number
- Postfix
- Highlighted blue number
Charting libraries
It's not important which library or tool you use to create good visualizations, as long as you follow our guide in regards of color usage and visualization types.
However, we recommend some libraries to be utlized, for best implementation.
Highcharts
Most of our example charts are built with Highcharts. It is easy to work with and decent to add our own styling to the charts.
You can change the look and feel both programatically and with CSS. We recommend to style with CSS.
.highcharts-color-0
fill $color-data-chromatic-green
stroke $color-data-chromatic-green
.highcharts-color-1
fill $color-data-chromatic-yellow
stroke $color-data-chromatic-yellow
.highcharts-color-2
fill $color-data-chromatic-red
stroke $color-data-chromatic-red
.highcharts-color-3
fill $color-data-chromatic-blue
stroke $color-data-chromatic-blue
Chart.js
Chart.js is a canvas-based charting tool, where styling is only done programatically.
Chart.css
Chart.css is a CSS-based charting tool, where styling is only done with CSS.
Google Charts: GeoChart
For geo charts, you can use Google GeoCharts.