CITY INTELLIGENCE DATA DESIGN

DATA VISUALISATION AND INFORMATION DESIGN GUIDELINES

CITY INTELLIGENCE DATA DESIGN
DATA VISUALISATION AND INFORMATION DESIGN GUIDELINES

Introduction Find & test your own colour variations ........................................................ P. 23

What is this guide for? ....................................................................................... P. 4 Create your own colour scales ....................................................................... P. 25
Diverging colour scales ..................................................................................... P. 27
Other colour considerations ........................................................................... P. 28
Chart Design Chart examples .................................................................................................... P. 29
Principles ................................................................................................................ P. 6
Practical steps to reduce clutter ................................................................... P. 7
Practical steps to highlight the data ............................................................. P. 8 Conclusion
Practical steps to improve presentation ..................................................... P. 9 Next steps .............................................................................................................. P. 37
Styling & Layout ......................................................................... .......................... P. 10 Further reading ..................................................................................................... P. 38
Using Colour .......................................................................................................... P. 11 Quick style reference ......................................................................................... P. 39
Mayor of London Brand Colours ................................................ ................... P. 12
Core Categorical Colour Palette .................................................................... P. 13
Darker Categorical Colour Palette ................................................................ P. 17
Lighter Categorical Colour Palette ............................................................... P. 20
INTRODUCTION
 Guiding principles, not rigid rules
INTRODUCTION Your data and design challenges will be unique to you and the context you
WHAT IS THIS GUIDE FOR? are working in. The solution you create will never be perfect, and will always
be compromised, but using some guiding principles can help us keep
A Work in Progress aiming for the best and most consistent design outcome possible.

Within the City Intelligence Unit at City Hall, we work on a diverse range of For every chart or graphic you design, you have to make the decisions
data visualisation and information design projects. These projects range about adding, removing or highlighting elements, and these guidelines are
from static presentations, simple chart publishing, interactive visualisation here to help that decision-making process.
applications and both simple and more complex web mapping applications.

This guide has evolved out of documenting principles & styles that have The code is more what you'd call "guidelines" than actual
worked across those projects so far, in order to keep our work consistent. rules. Welcome aboard the Black Pearl, Miss Turner.
- Captain Barbossa, Pirates of the Caribbean1
Now seemed like a good time to share these simple principles so far, to help
us all think about how we present data, and as handy guide if you are looking
for answers to your own chart design challenges. Guidelines are just a guide, and not rules to be dogmatically followed.

This is an ongoing, evolving work in progress, that will expand, shift and You should make a conscious decision about the charts types you choose,
change format as we tackle more projects, and see what does & doesn’t the data you use, and the elements you add or remove to highlight the data.
work. So, if you have any thoughts or feedback on the guide so far, then do
get in touch: mike.brondbjerg@london.gov.uk
CHART DESIGN
 Maximizing the Data-Ink Ratio
CHART DESIGN Edward Tufte has an interesting approach to reducing visual clutter, and
PRINCIPLES focusing only on elements that “show the data”.

Remove the noise, highlight the signal

Above all else, show the data.
The quote below is one of Dieter Rams’ 10 Principles of good design and is - Edward Tufte4
particularly pertinent to the field of data visualisation & information design
(as noted in the book “Data Visualisation” by Andy Kirk2).
“Data-Ink” is the “non-erasable core of a graphic”, and he encourages you to
dedicate as much of the ink in a graphic to showing the data.
Good design is as little design as possible. Less, but better.
- Dieter Rams3 The “Data-Ink Ratio” describes the amount of ink that is used to
communicate data vs other decorative clutter.

Within data visualisation, “Less, but better” means removing unnecessary Edward Tufte’s Five “Laws” of Data-Ink:
visual clutter, but keeping, improving and highlighting only elements that 1. Above all else show the data.
reinforce or illustrate the point we are trying to make with the data…. 2. Maximize the data-ink ratio.
Because a chart isn’t the data, it’s an opinion about (or at least a narrow view 3. Erase non-data ink.
of) the data. 4. Erase redundant data-ink.
5. Revise and edit.
The same principle can be applied to the editorial content surrounding and
contextualising our charts too.
 This chart needs some work
CHART DESIGN DATA A
1,000
DATA B DATA C

PRACTICAL STEPS 900

800

700

Practical steps to reduce clutter

Value of something
600

500

400
Minimal gridlines & tick marks Remove decoration and effects 300

Use as few gridlines and ticks as is Get rid of any unnecessary key lines 200

necessary to understand the range around shapes, drop shadows and 100

& context of your data. Aiming for bevelling effects.

0
2008 2010 2012 2014 2016 2018 2020 2022 2024 2026 2028
Years
around 5 gridlines / tick marks is
usually adequate. Make your Don’t try and show too much
A cleaner chart, but could still be better
gridlines as light as possible, but still If you have lots of data to show,
Data A Data B Data C
visible. perhaps use small multiples of
£1,000
charts rather than over complicating
Remove borders one chart. £800
Remove borders around the chart to
£600
give it more space. Minimise use of colour
Remove colour encoding of data £400
Minimise labelling that is there only for context or
Labelling your axis as unobtrusively comparison. Using lighter/thinner £200

as possible, gives you space to grey lines for this contextual data
£0
accentuate important points on the allows to better highlight with 2008 2015 2018 2023 2028
axis or in the data. meaningful colour later.
 Only use dots & marks on Say what you see
CHART DESIGN important data points Help the reader by titling the chart
• First & last values with a description of what you want
PRACTICAL STEPS • Interesting events them to see in the graphic. Use
• Show where there are few, or colour to connect body copy in
Practical steps to highlight the data or message inconsistent data points. your document to data points in
your chart.
Focus Show key points on the axis
Focus ranges to show data most Highlight key dates or values on the The value of A is projected to fall, but then recover
clearly. Only if doing so doesn’t axis. Consider only including the A longer more detailed descripition of the context and methodology behind
remove important context. date ticks on your axis that are the projection that A, will fall but eventually rise again.
relevant to the chart.
£900 Projected
Use colour or line weight
Highlight the important data with Highlight important thresholds
a consistent / thematic colour, and contextual ranges Data A
£800
and increasing the weight of the Draw attention to important £800
Data A
line thresholds in the range of your data. £765

E.g. placing a stronger gridline when

Data B
Label directly your y-axis DOES start at zero. Or £700
£690
This can help draw attention to a where you need to show data
key data point and simplifies around a threshold.
Data C
reading by not having to translate £600 £651

the meaning of a colour legend.

2008 2018 2025 2028
 Connect data and narrative
CHART DESIGN Highlight body copy in your document with a colour or style that connects it
to a highlighted data in your chart.
PRACTICAL STEPS
Keep the visual quality high
Practical steps to improve presentation layout, Avoid poor quality icons or pictograms that don’t lend clear meaning to your
design & readability design or might appear trite or cliched. Try to avoid poor quality or tired
stock photography.
Maintain consistency
Make consistent design decisions throughout your work, and certainly Audience
within any given presentation. For example, once your reader has learned Pick the style, tone, depth & layout of your presentation to suit your
that “pink” might mean “London” don’t contradict that in your next chart. audience and the platform they will be viewing it on. Print, presentation,
online, or all of the above.
Aid navigation & context
Allow users to navigate your presentation or document easily by
signposting (with colour or icons) where they are. This also gives them Perhaps start thinking about working “Digital First”
context for the data they are reading. Should we still be presenting work as a Word document, PowerPoint
presentation, or (like this) PDF? Web based content makes navigation easier
Consider chart comparison and content richer and more accessible.
Ensure any two charts that are likely to be compared, use the same space
for layout and use the same scale on the x & y axis. If we can create the infrastructure, support & training, can we strive towards
“digital first” publication?
Consistent text hierarchy across charts and within document
Your chart should feel that it belongs to your document, so keep the text
size consistent with the hierarchy of your document or web page.
 Remember, your charts should feel part of the document they are displayed
CHART DESIGN within, and so text sizes should relate to the document text hierarchy and all
chart text should be consistent across the document.
STYLING & LAYOUT
Shown are typical text and line weight settings derived from the London
Consistent layout, labels & lines Datastore’s body copy. Depending on your tools, device / document
For ease of comprehension, it’s important that your charts are presented context, and resolution, you may want to change the specific settings, but
consistently, and are as clean and uncluttered as possible. the relative relationships between lines & type settings should be similar.

A descriptive chart title in 18pt Bold #353d42 A descriptive chart title in 18pt Bold #FFFFFF
More detailed explanation matching the document body copy in 14pt More detailed explanation matching the document body copy in 14pt

12pt Projected: 12pt #666666 12pt Projected: 12pt #FFFFFF

1pt 1pt
#D8D8D8 #4E5254
4pt dashed 12pt #353D42 4pt dashed 12pt #FFFFFF
2pt 4pt 2pt 4pt
12pt and 10pt 12pt and 10pt

2pt 2pt
#CCCCCC #FFFFFF
12pt 12pt
2pt dashed 2pt dashed

1pt dotted 12pt #353D42 1pt 1pt dotted 12pt #FFFFFF

1pt
#666666 #666666 and 10pt #FFFFFF #FFFFFF and 10pt
Area opacity Area opacity
12pt 4% #000000 12pt 4% #FFFFFF

12pt 10pt 12pt 10pt 12pt 12pt 10pt 12pt 10pt 12pt
Source: General chart text in 12pt #666666 Source: General chart text in 12pt #FFFFFF
 CHART DESIGN
USING COLOUR

When we produce a graphic, we often use colour for differentiating

categories or encoding value. But colour is tricky to get right, and not
always as useful as we might hope. Balancing accessibility, perception,
cultural association, branding and it’s appearance in different contexts, and
to different users, can limit our options.

Consider the following principles when using colours:

• Favour direct labelling over using a wide range of categorical colours
• Try and use a single colour to highlight your data, and grey/white for
contextual / comparison data.
• Apply colour to meaning consistently across all your charts that are
likely to be read in the same context.
• Use colour to connect information across different charts and editorial.
• Some colours have overriding cultural, policticalor contextual meaning.
Try and reserve those if you’ll need them later in your presentation.
E.g. Red = Bad, Failing or Hot, Green = Good, improving or
Environment, Blue = cold, etc...
 When presenting data, and while not ideal, we sometimes need to use a
CHART DESIGN wide range of categorical colours. These categorical colours, for the sake of
clarity and accessibility need to be visually distinct from each other.
MAYOR OF LONDON BRAND COLOURS
Some of the brand colours, can’t be used to together in a visualisation
The Mayor of London brand guildlines contain this set of 11 colours, of because they are not visually distinct enough for some readers, and in some
which Pink (#ee266d) is the hero colour. These colours are brilliantly environments and applications (like small lines or points).
impactful for brand communications when used in isolation or small
pairings. However for data visualisation and information design we need to This subset of the brand colours do work as categorical colours:
think about colour slightly differently. A: Pink "#ee266d", rgb(238,38,109);
B: Cyan "#00aeef", rgb(0,174,239);
C: Dark Pink "#9e0059", rgb(158,0,89);
PINK C YA N GREEN
D: Mustard "#dca000", rgb(220,160,0);
C0 M95 Y35 K0 C100 M0 Y0 K0 C100 M0 Y100 K0
R238 G38 B109 R0 G174 B239 R0 G141 B72 E: Red "#e0001b" rgb(224,0,27);
P 213 P Process Cyan P Bright Green
#EE266D #00AEEF #008D48
These colours and pairings are problematic for accessibility:
YE LLOW ORANGE RED Green vs Red
C0 M0 Y100 K0 C0 M70 Y100 K0 C0 M100 Y100 K0
R255 G242 B0 R233 G88 B20 R224 G0 B27
Blue vs Purple and Dark Pink
P Process Yellow P 164 P Red 032 Purple vs Dark Pink
#FFF200 #E85713 #E0001B
Orange vs Red
Yellow on white doesn’t contrast well
DARK PINK BLUE M U S TA R D
C20 M100 Y35 K30 C100 M5 Y0 K47 C10 M40 Y100 K0
R158 G0 B89 R0 G87 B125 R220 G160 B0
P 228
#9E0059
P 308
#00577D
P 124
#DCA000 As a solution to this need for an extended range of categorical colours, we
have used the Hero Pink and Dark Pink, and then developed a new set of
PURPLE GREY B L ACK
C50 M89 Y0 K0 C25 M10 Y10 K85 K100 colours around them. They are as similar as possible to the brand colours
R121 45 B137 R54 G62 B66 R0 G0 B0
P 258 P 432 P Black but with modifications in Hue, Saturation and Brightness to give them more
#792C89 #353D42 #000000
visual separation.
Mayor of London Brand Guidelines:
https://www.london.gov.uk/about-us/governance-and-spending/sharing-our-information/our-brand-guidelines
 CHART DESIGN
Dark App Dark Panel

All colours work on a dark background

#121516 #1b2021

CORE CATEGORICAL COLOUR PALETTE

18,21,22 27,32,33

Base for web Web app UI

applications panels

Core colours and chart design system

Below are a quick reference to our core categorical colours that have been
developed to extend the LDN Pink and Dark Pink brand colours.

Blue LDN Dk Pink Yellow Red Green Purple Turquoise Pink Orange LDN Pink
LDN Grey LDN Dark LDN Light

This subset work well on the LDN Grey background

#353d42 #2a3135 #868b8e
53,61,66 42,49,53 134,139,142
#6da7de #9e0059 #dee000 #d82222 #5ea15d #943fa6 #63c5b5 #ff38ba #eb861e #ee266d
109,167,222 158,0,89 222,224,0 216,34,34 94,161,93 148,63,166 99,197,181 255,56,186 235,134,30 238,38,109

London.gov.uk London.gov.uk London.gov.uk

style panels dark UI light UI
Light BG Light Chart BG Light BG Light BG Dark BG Dark Chart BG Dark BG Dark BG
Context Data Highlight Area Strong Grid Light Grid Context Data Highlight Area Strong Grid Light Grid

#cccccc 4% #000000 #666666 #d8d8d8 #ffffff 4% #ffffff #ffffff #4e5254

204,204,204 0,0,0 102,102,102 216,216,216 255,255,255 255,255,255 255,255,255 78,82,84

Document Document Axis Text Highlighted Chart Chart White Light App
Headlines Body Text & Labels Labels Label Black Label White All colours work on a light background

#ffffff #f5f5f5
255,255,255 245,245,245

#353d42 #666666 #666666 #353d42 #000000 #ffffff

53,61,66 102,102,102 102,102,102 53,61,66 0,0,0 255,255,255 Printed page Light base for
and simple app web apps
 Core categorical colour palette
CHART DESIGN
CORE CATEGORICAL COLOUR PALETTE

While fewer colours are better, we often need numerous categorical colours
on charts and maps. The following colours have been carefully chosen to N Pi
nk* D: R
ed
J: LD
work with LDN Pink and Dark Pink and (unless coloured areas are small) are
discernable by people with most* colour vision deficiancies.

nk
Pi

I: O
Dk
Below are suggested default usage order and possible colour ramps.

ra
n
N

ge
5f5f5

LD
o #f
lighter t

B:
Core categorical colours by default use order
A: Blue "#6da7de", rgb(109,167,222);
Core
B: LDN Dk Pink "#9e0059", rgb(158,0,89); suggested suggested ramp

C: Yellow
H: Pink
C: Yellow "#dee000", rgb(222,224,0); *Avoid categorical end/mid points
D: Red "#d82222", rgb(216,34,34); Together combinations
E: Green* "#5ea15d", rgb(94,161,93);
F: Purple "#943fa6", rgb(148,63,166);
G: Turquoise "#63c5b5", rgb(99,197,181); darker
to #12
H: Pink "#ff38ba", rgb(255,56,186); 1212

E:
ple
I: Orange "#eb861e", rgb(235,134,30);

Gr
ur

ee
P

n*
F:
J: LDN Pink* "#ee266d" rgb(238,38,109); A B C D E* F G H I J* use
order
G: T
Example single hue categorical colour ramp end/mid points: lue
A: B oise
urqu

Visit https://gka.github.io/palettes/ to generate your own steps

A: Blue 252c35, 6da7de, dbe5f1
B: LDN Dk Pink 63193b, 9e0059, e8cad3
C: Yellow 36351a, dee000, f3ecaa
D: Red 5d221a, d82222, f9d0c7
E: Green 212b20, 5ea15d, d8e4d6
F: Purple 432648, 943fa6, e3d1e5
G: Turquoise 23312f, 63c5b5, bfe2db
H: Pink 3c1f30, ff38ba, fcd6e9
I: Orange 3a2718, eb861e, fadfcb
J: LDN Pink 642434, ee266d, fad2d8
 Core categorical colour palette on a dark application background
CHART DESIGN
CORE CATEGORICAL COLOUR PALETTE
E
For accessibility and clarity, you ideally wouldn’t use this many colours, but C

here we show all 10 categorical colours together on a map. They work on H

G
both light and dark basemaps or application canvases. A couple of colour A
A

D
ramps for choropleths are also shown. I J

E
C

H
G
A
A

D
I J

F
BG: Dark Panel "#1b2021", rgb(27,32,33);
Map: LDN Dark "#2a3135" rgb(42,49,53);
B

BG: White "#ffffff", rgb(255,255,255);

Map: Grey "#dddddd" rgb(204,204,204);
 CHART DESIGN
CORE CATEGORICAL COLOUR PALETTE

Some colours don’t contrast well with the “mid” LDN grey background, so
here we have a reduced palette of 6 of our core categorical colours. N Pi
nk
J: LD

Reduced Core categorical colours by default use order

A: Blue "#6da7de", rgb(109,167,222);

I: O
ra
C: Yellow "#dee000", rgb(222,224,0);

gen
o #f 5f5f5
lighter t
E

E: Green "#5ea15d", rgb(94,161,93); C

G: Turquoise "#63c5b5", rgb(99,197,181); A

G

I: Orange "#eb861e", rgb(235,134,30); I J

Core
J: LDN Pink "#ee266d" rgb(238,38,109); suggested suggested ramp

C: Yellow
categorical end/mid points
combinations

darker
to #12
1212

E:
It looks odd if ramps start darker than this LDN grey BG. Here we have a some

G ree
n
example ramps, starting from a lighter base, as shown in the colour wheel. use
Visit https://gka.github.io/palettes/ to generate your own steps order
G: T
lue urqu
A: B oise
A: Blue 37485b, 6da7de, c3d5ec
C: Yellow 5d5b1f, dee000, f5f0ce
E: Green 3f633e, 5ea15d, d8e4d6
G: Turquoise 33534d, 63c5b5, a2d9ce
I: Orange 8e541f, eb861e, fadfcb
J: LDN Pink bd2a59, ee266d, fad2d8
 Darker, less contrasting categorical colour palette
CHART DESIGN
DARKER CATEGORICAL COLOUR PALETTE

The core categorical colours (above) work well with the GLA brand mayoral
& pink and used as key colours they are great. However, as a group they are D: R
ed

quite bright and saturated, so here we have a set of less saturated, less
contrasting, darker variations. As a consequence we have fewer categorical

H:
nt
colours to use, but still enough for most projects.

O
ge

ra
Ma

gen
o #f5f5f5

B:
lighter t
Dark (lower contrast) categorical colours by default use order
A: Blue: "#3681bf", rgb(54,129,191);
B: Magenta "#89105d", rgb(137,16,93); Darker / lower

C: Yellow
contrast suggested ramp
C: Yellow "#d3c913", rgb(211,201,19); end/mid points
categorical
D: Red "#af2828", rgb(175,40,40); combinations
E: Green "#73a072", rgb(115,160,114);
F: Turquoise "#56b2a1", rgb(86,178,161);
G: Purple "#884299", rgb(136,66,153); darker
to #12
1212
H: Orange "#b76325" rgb(183,99,37);
A B C D E F G H

ple

E:
Gr
ur

ee
:P

n
G
use
Example single hue categorical colour ramp end/mid points: order
Visit https://gka.github.io/palettes/ to generate your own steps lue
A: B ise
F: Tu
rquo

A: Blue: 1e2630, 3681bf, d3ddea

B: Magenta 581a3e, 89105d, e2cad5
C: Yellow 35321a, d3c913, f2eccc
D: Red 4e201b, af2828, eecdc8
E: Green 242c24, 73a072, dae3d9
F: Turquoise 212e2c, 56b2a1, d7e8e3
G: Purple 3f2644, 884299, e0d1e3
H: Orange 312118, b76325, eed7c9
 Darker categorical colour palette on a dark application background
CHART DESIGN
DARKER CATEGORICAL COLOUR PALETTE
E
For accessibility and clarity, you ideally wouldn’t use this many colours, but C

here we show all 8 darker categorical colours together on a map. They work H
G
on both light and dark basemaps or application canvases. A couple of A

D
colour ramps for choropleths are also shown.
F

E
C

H
G
A

F
BG: Dark Panel "#1b2021", rgb(27,32,33);
Map: LDN Dark "#2a3135" rgb(42,49,53);
B

BG: White "#ffffff", rgb(255,255,255);

Map: Grey "#dddddd" rgb(204,204,204);
 CHART DESIGN
DARKER CATEGORICAL COLOUR PALETTE

Some colours don’t contrast well with the “mid” LDN grey background, but
with the darker/less contrasting set we can still use 7 colours. D: R
ed

Reduced dark (lower contrast) categorical colours by default use order

A: Blue: "#3681bf", rgb(54,129,191);

H:
raO
C: Yellow "#d3c913", rgb(211,201,19);

n
f5
o #f5f5

ge
lighter t
E

D: Red* "#af2828", rgb(175,40,40);

C

E: Green "#73a072", rgb(115,160,114);

H
G
A

F: Turquoise "#56b2a1", rgb(86,178,161);

D*

Darker / lower
G: Purple "#884299", rgb(136,66,153);
F

suggested ramp

C: Yellow
contrast
H: Orange "#b76325" rgb(183,99,37); categorical end/mid points
combinations
*Avoid red unless needed on this LDN BG
darker
to #12
1212

ple

E:
It looks odd if ramps start darker than this LDN grey BG. Here we have a some

Gr
ur

ee
:P

n
G
example ramps, starting from a lighter base, as shown in the colour wheel. use
Visit https://gka.github.io/palettes/ to generate your own steps order
F: Tu
lue rquo
A: B ise
A: Blue: 2e5174, 3681bf, d3ddea
C: Yellow 59541e, d3c913, f2eccc
D: Red af2828, eecdc8
E: Green 374636, 73a072, dae3d9
F: Turquoise 2f4d46, 56b2a1, b9dad3
G: Purple 6f397b, 884299, e0d1e3
H: Orange 714120, b76325, eed7c9
 Lighter, less contrasting categorical colour palette
CHART DESIGN
LIGHTER CATEGORICAL COLOUR PALETTE

The core categorical colours (above) work well with the GLA brand mayoral
& pink and used as key colours they are great. However, as a group they are D: R
ed

quite bright and saturated, so as well as they darker, less saturated set, we
have also created this reduced, lighter, less saturated, less contrasting

G:
palette of 7 colours.

raO
n
f5f5

ge
o #f5
lighter t
Light (lower contrast) Categorical colours by default use order
A: Blue "#7ab5e5", rgb(122,181,229);
Lighter / lower
B: Purple "#964a92", rgb(150,74,146); contrast suggested ramp

C: Yellow
B: Purple
C: Yellow "#ddd82c", rgb(221,216,44); categorical end/mid points
D: Red "#d84545", rgb(216,69,69); combinations
E: Green "#65aa63", rgb(101,170,99);
F: Turquoise "#49bf9a", rgb(73,191,154);
G: Orange "#d6793a" rgb(214,121,58); darker
to #12
1212
A B C D E F G

:G E
re
n e
use
Example single hue categorical colour ramp end/mid points: order
Visit https://gka.github.io/palettes/ to generate your own steps lue
A: B ise
F: Tu
rquo

A: Blue 272f36, 7ab5e5, dee8f2

B: Purple 432940, 964a92, e3d2e0
C: Yellow 36331c, ddd82c, f4efcf
D: Red 5d2926, d84545, f6d4cf
E: Green 222d21, 65aa63, d9e6d7
F: Turquoise 20302a, 49bf9a, d5ebe2
G: Orange 35251b, d6793a, f4dcce
 Lighter categorical colour palette on a dark application background
CHART DESIGN
LIGHTER CATEGORICAL COLOUR PALETTE
E
For accessibility and clarity, you ideally wouldn’t use this many colours, but C

here we show all 7 lighter categorical colours together on a map. They work G

on both light and dark basemaps or application canvases. A couple of A

D
colour ramps for choropleths are also shown.
F

E
C

G
A

F
BG: Dark Panel "#1b2021", rgb(27,32,33);
Map: LDN Dark "#2a3135" rgb(42,49,53);
B

BG: White "#ffffff", rgb(255,255,255);

Map: Grey "#dddddd" rgb(204,204,204);
 CHART DESIGN
LIGHTER CATEGORICAL COLOUR PALETTE

All 7 of these lighter, less saturated, lower contrast colours work with LDN
grey background. D: R
ed

Light (lower contrast) Categorical colours by default use order

A: Blue "#7ab5e5", rgb(122,181,229);

G:
raO
B: Purple "#964a92", rgb(150,74,146);

n
5f5f5

ge
o #f
lighter t
E

C: Yellow "#ddd82c", rgb(221,216,44); C

D: Red "#d84545", rgb(216,69,69); A

G

E: Green "#65aa63", rgb(101,170,99); D

Lighter / lower
F: Turquoise "#49bf9a", rgb(73,191,154); F
contrast suggested ramp

C: Yellow
B: Purple
G: Orange "#d6793a" rgb(214,121,58); B categorical end/mid points
combinations

darker
to #12
1212

E:
It looks odd if ramps start darker than this LDN grey BG. Here we have a some

G ree
n
example ramps, starting from a lighter base, as shown in the colour wheel. use
Visit https://gka.github.io/palettes/ to generate your own steps order
F: Tu
lue rquo
A: B ise
A: Blue 3b4d5d, 7ab5e5, dee8f2
B: Purple 793f76, 964a92, e3d2e0
C: Yellow 5c5923, ddd82c, f4efcf
D: Red ad3d3a, d84545, f6d4cf
E: Green 334a31, 65aa63, d9e6d7
F: Turquoise 2c5043, 49bf9a, d5ebe2
G: Orange 824d2b, d6793a, f4dcce
 There are many different types of colour impairment that affect people’s
CHART DESIGN ability to differentiate colour, in lesser or greater amounts. Also, everyone
struggles to differentiate visually similar colours on bad screens, in difficult
FIND & TEST YOUR OWN COLOUR VARIATIONS environments, and if used on very fine lines or text.

Our three colour palettes have been developed to work in various contexts, Viz Palette
with the GLA/MOL brand & (if used sparingly) will be accessible to most https://projects.susielu.com/viz-palette
people in most applications. This is a great tool that helps check and emulate a colour palette for
different colour impairments.
However, you will inevitably need a different colour or shade at some point.
You could combine colours or shades from within these palettes,
or pick your own.

Either way you will need to test that there is good visual separation between
categorical colours to make them as clear and accessible to as many
people as possible.

Here we’ll show you some tools to help you do just that!

Core Palette Darker Palette Lighter Palette

 Picking a new colour methodically
CHART DESIGN The ”Viz Palette” tool makes use of another great library (under the hood)
called chroma.js. Within the colour picker it allows use to move away from a
FIND & TEST YOUR OWN COLOUR VARIATIONS particular colour in steps of “lightness/darkness” and “saturation” that are
reasonably perceivable.
Viz Palette (continued)
Here you can see, tested under “Deuteranopia” colour deficiancy (affecting
0.56% of the population) our core colour palette has a few minor issues (thin
connections), and one major issue (thick connection), when trying to
combine ALL 10 colours together.

So, we should make sure that if we are using certain colours together, we
should ensure our lines are not too fine, and (as mentioned above) avoid the
LDN Pink with this green if possible. You can also use the HSL controls to shift around the Hue spectrum and
make finer adjustments to your Saturation and Lightness.
Remember, we shouldn’t rely
on colour alone, particularly It’s useful to imagine the HSL colour model as
when using more than around a cylinder. Move around the perimeter for
5 colours. different Hues on the colour spectrum, away
from the center for saturation (amount of
We can use other methods colour) and vertically for lightness.
too, like labelling and
Image credit:
interactivity, to help users https://commons.wikimedia.org/wiki/File:HSL_color_solid_cylinder_saturation_gray.png
navigate and decode
the data.
 Chroma.js Colour Scale Helper
CHART DESIGN https://gka.github.io/palettes/
You will inevitably need to create your own colour scales at some point for a
CREATE YOUR OWN COLOUR SCALES choropleth map or some continuous data. This tool (developed by Gregor
Aisch, and also built into Datawrapper.de) can help you create single and
A bit of background on colour scales multi-hued, sequential and diverging scales are that are perceptually
Creating Single Hue colour scales (one hue, moving from lighter to darker) is correct.
fairly simple (though errors can occur), but creating multi-hued scales
(moving from one hue to another) can create real problems, because not all It helps adjust a scale’s brightness, avoids colour kinks that occur when you
colours across the specturm are perceived equally. interpolate across the spectrum and let’s choose your step count.

Looking at this rainbow scale, we can see there are brighter and darker
areas, and places where the colour seems to change faster than others.
This it makes it hard to read and perceive value correctly.
Rainbow: X

This issue has been addressed recently and researchers have developed a
more perceptually uniform set of scales known as the Viridis Scales:
Viridis:
Magma:
Plasma:
Inferno:
Cividis:

More Info: https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html

 You can see in the diverging scale there is a slight perceptual kink in the
CHART DESIGN center where they converge on our core colour.

CREATE YOUR OWN COLOUR SCALES Also the dark step at D-4 is (we judge) probably a bit too dark to be useful,
so we want to run our scale from D-3, smoothly through our core red, and
Chroma.js colour scales (continued) D-5 D+5
then too D+4, the lightest shade.
D-4 D+4

In our colour wheels you can see we have the core D-3 D+3 Remember, on screen, the dark shades will be harder to see on a white
categorical colours, but also suggestions of darker D-2 D+2 background so think about the context your colours will be seen in.
and lighter shades from which you can start and end D-1 D+1

your colour scales. D: #af2828

Finally we switch back to the “sequential” mode, and generate a nice
smooth scale from D-3, bending toward our core red, and out to D+4.
We found the dark and light shades, by generating an 11 step diverging
scale from the core colour out to dark (#121212) and light grey (#f5f5f5).

D: #af2828
D-3 #4e201b D+4 #eecdc8

D-5 #121212 D-4 D-3 D-2 D-1 D: #af2828 D+1 D+2 D+3 D+4 D+5 #f5f5f5

Note: the kink in the scale

 For data on dark backgrounds and maps
CHART DESIGN Blue - Green: Left: 8eaed5,3681bf, 333333 Right: 333333, 73a072, 8cb08b

DIVERGING COLOUR SCALES Red - Blue: Left: d57f73,af2828, 333333 Right: 333333,3681bf,8eaed5

Diverging scales with Chroma.js Red - Yellow: Left: d57f73,af2828, 333333 Right: 333333, d3c913, ded153
https://gka.github.io/palettes/#diverging
Chroma.js tool can also help you generate diverging scales. Here we have Red - Green*: Left: d57f73,af2828,333333 Right: 333333, 73a072, 8cb08b
created a few for you as a starting point, but you can of course adjust them
to your required number of steps and endpoints. *With caution

Hex to rgb() - Colour code conversion tool

https://bjoernkw.github.io/hexrgb/
Once you have worked with these tools, you will end up with strings of Hex
values, but you can convert them to RGB here if you need to.
For data on light backgrounds and maps
Blue - Green: Left: 2e5174,3681bf,eeeeee Right: eeeeee,73a072,4a6349 Introducing gglaplot for R
https://github.com/Greater-London-Authority/gglaplot
Red - Blue: Left: 8e2724,af2828,eeeeee Right: eeeeee,3681bf,2e5174 In an effort to make the layout, styling and colour
palettes we have introduced in this styleguide
Red - Yellow: Left: 8e2724,af2828,eeeeee Right: eeeeee, dee000, 59541e easier to access, we have started the development
of a new R package called “gglaplot”. As you can
Red - Green*: Left: 8e2724,af2828,eeeeee Right: eeeeee, 73a072, 4a6349 guess it’s a branch of the popular ggplot.

*With caution
 Projectors
CHART DESIGN Just like monitors, some projectors are better than others. Some meeting
rooms are brighter than others too. Check that your projector is using the
OTHER COLOUR CONSIDERATIONS correct colour mode, and not changing your colours, but also think about
your data colours.
Colour in your presentation context
• Bright rooms make light colours hard to see
We also need to consider the context in which our graphics are going to be • Increasing contrast in your presentation will help
displayed. Think about who is viewing your graphic and how? • The neon pink can sometimes appear indistinct on thin lines if used on
a darker background.
• Will it be printed to make notes on in a meeting?
• Will you be presenting in a brightly lit room with a poor projector? Subject & cultural considerations
• Not all monitors are equal… lighter greys and washed out colours can The core colour palettes are a suggested first place to look for your colours,
be hard to see on some monitors. but of course sometimes they won’t be appropriate.
• Will the audience need to be able understand the colour quickly and
without labelling? If you are presenting data of a sensitive nature, then a bright, saturated
• Think about accessibility and use distinct colours. colour palette may well not be appropriate. Perhaps think about using the
Larger blocks of colour can also help those with colour blindness darker less saturated palette (above).
perceive the colour better.

What to consider if printing (if you have to print)

• Use white / light backgrounds to reduce ink and improve readability.
• Pink looks great on screen, but can print quite red. This may
communicate the wrong meaning, and be confused with other reds.
 London’s population is bigger than ever and still growing
CHART DESIGN With approximately 8.9m residents, London’s population is bigger than ever,
and is set to grow to approximately 10.5m inhabitants by 2041.
EXAMPLES
12m
Projected
2050: 10.9m
Some real world examples
Projected
10m 2041: 10.5m
We have been working with, and evolving this system over a few different
projects. Here you’ll find a few examples of common charts, Illustrating New Peak
Previous Peak 2018: 8.9m
where we have stuck to the system, and some places where we have 1939: 8.6m
8m
deviated from it, hopefully to increase clarity.

Standard line chart

6m
Key features of this chart:

• Y-Axis starts at 0, and is clearly indicated by use of a stronger baseline

4m
that stands out from the background gridlines.
• Only enough gridlines to show range and groups of values
• Data is highlighted using a thematic colour and by marking and
labelling key dates & values. 2m

• A legend is no longer needed as data is labelled directly.

• Projections differentiated through line style and a highlighted future
date range. 0

1801 1939 2018 2041

Source: London Measured Report (Sep 2018)
 London’s employment rate stands near to a record high
CHART DESIGN Working age (16-64) employment rate % 1992-2018 seasonally adjusted

EXAMPLES 80%

UK
Standard line chart variations Mar - May 2018:
75.7%
Key features of this chart:
75%

• To focus on the detail of the data, we have NOT started the Y-Axis at
zero. To highlight this, we have removed the strong baseline. We have
also shown the vertical gridlines extending beyond the horizontal grid,
70% London
to imply that the range continues beyond our current view. Mar - May 2018:
• London data highlighted by use of thematic colour and UK shown in 74.7%

white for context.

• The labelling is tricky to place so we have connected the labels to the London London
65% Jun - Aug 1999: Apr - Jun 2008:
data with dotted lines. Labels are using large 20pt & smaller 16pt text. 70.7% 70.5%

• As the data is quite granular and detailed, we must reduce the default
line weight to 2pt, so as not to obscure any detail.
• We needed to include months as well as years on the X-Axis, which
60%
meant reducing the default axis text from 20pt to 16pt.
Mar-May Apr-Jun Apr-Jun Apr-Jun Apr-Jun Apr-Jun Apr-Jun Apr-Jun Apr-Jun Mar-May
1992 1995 1998 2001 2004 2007 2010 2013 2016 2018

Source: London Measured Report (Sep 2018)

 London is more highly qualified than the rest of the UK
CHART DESIGN Qualification level of 25-64 year olds in London and rest of UK, 2017

EXAMPLES London Rest of UK

60%
56%
Bar / column chart
Key features of this chart:

• Always start bar Y-Axis at zero, and indicate with a strong baseline. 40% 40%

• Show just enough gridlines to frame the data.

• Colour bars to visually group and easily focus on key vs context data
• Group through labelling rather than many colour variations.
• Label bars with value directly if possible (right: using small 16pt text)
20%
15%
Life expectancy in London is higher than the UK, but is
15%
11% 11%
inconsistent across Boroughs 8%
7%
10%
7% 7%
8%

Life expectancy at birth (Males only shown here) 4%

1%
0%
Males 0 20 40 60 80 (Years)
NVQ4+ NVQ3 Trade NVQ2 NVQ1 Other None
London Average 80.3
High Mid Low
UK Average 79.5
Barking & Dagenham Lowest Borough 77.6 Source: London Measured Report (Sep 2018)
Kensington and Chelsea Highest Borough 83.3

Source: London Measured Report (Sept 2018)

 Stacked bars (for proportions of total)
CHART DESIGN Key features of this chart:

EXAMPLES • All variables sum to 100% to show proportion of total.

• Single colour and labelling in place to highlight narrative in text.
Stacked bars (for cumulative total)
Key features of this chart: London is renowned for its diversity
40% of London perceived themselves as Black, Asian or Minority Ethnic.
• Good for comparing grand total score or count. Mixed
White Asian Black /Other
• Good for showing categorical breakdown of total, however comparing
categories can be tricky as baseline shifts. So, essential to label each London 60% 18% 12% 10%
segment with a value directly. Consider using split bars instead.
UK 87% 7%
London pupils do better than those across England as a
Source: London Measured Report (Sep 2018)
whole, on each element of the Attainment 8
Average score per pupil in each Attainment 8 element - 2016/17 • If showing a single variable, lightly shade the background to 100%

English Mathematics English Baccalaureate Open London vs UK Employment Rate

London Average Total Per Pupil: 48.9 Employed

10.6 9.5 13.6 15.1 London 74.7%

England Average Total Per Pupil: 46.4

9.9 9 12.6 14.9 UK 75.7%

Source: Department for Education / data.london.gov.uk/economic-fairness/ Source: London Measured Report (Sep 2018)
 Stacked bars (for proportions of total)
CHART DESIGN Key features of this chart:

EXAMPLES • All variables sum to 100% to show proportion of total.

• Single colour and labelling in place to highlight narrative in text.
Donut charts (for proportions of the total)
Because, donuts are nicer than pies... But beware, as with real donuts, London accounts for 23% of UK economic output
inappropriate use can be bad for your health, but sometimes you need a In 2016 London’s economic output (its ‘Gross Value Added’) totalled £396
change from stacked bar charts. billion accounting for around 23% of UK economic output. London makes
up 13% of the UK population as a whole.
Key features of this chart:

• Showing proportion of parts within whole. London: 23%

£396 billion
• Visual variation from stacked bars, but not as good for comparison.
• Use as few variables as possible (ideally 2, but no more than 3 or 4).
• Indicate what the entire donut represents. London:
UK Economic
13%
• Label segments directly. Output

• Proportion of ring to hole, is important...not too skinny or too thick.

Total UK
Population

Rest of UK: 77%

Rest of UK:
86%

Source: London Measured Report (Sep 2018)

Pies aren’t as Too skinny Too thick Just right!
elegant as donuts
 London Borough Populations
CHART DESIGN ONS Mid-Year London Borough Population Estimates 2015

EXAMPLES Barnet
379,806

Newham
Choropleth maps 334,269

Key features of this chart:

• Use a continuous or or quantized colour scale to show value.

• Differentiating colour can be tricky, so label map & legend if possible.
• Choropleths can be misleading as larger areas can be perceived as Borough Population
7,160
having higher values. Try a symbol map or hex map instead. 203,520
Barnet 249,090
379,806 City of London 296,111
7,160
324,814
Newham 379,806
334,269

Source: London Datastore

Higher value, more “ink”

Here we’re showing two different scales based around the core blue.
Borough Population
On the lighter background, darker colour means higher value. On the dark
7,160
203,520 background, it’s the opposite. Higher values are shown as brighter.
City of London 249,090 This LDN dark BG is not very dark, so it’s important that the darkest shade
7,160 296,111
324,814 of the map is NOT darker than the LDN grey background.
379,806
 London’s richest 10% have 9.6x the income of it’s
CHART DESIGN poorest 10%. A difference greater than the rest of the UK
EXAMPLES Weekly Income (After Housing Costs)

£1,200 London Rest of UK

Custom charts
£1,059
Some data and narratives can’t be communicated well through a regular
£1,000
chart, so sometimes we need to create custom graphics. 90%
£862
Wealth in London is more unequally divided than income £800
Percentage of total wealth owned by households in each decile 2014-16 80%

£600 9.6x difference

London Population % GB
between top 10% 70%
Wealthiest 5.1x difference
and bottom 10%
Wealth Wealth 60% between top 10%
61% 10% 40% £400
Ownership Ownership 50% and bottom 10%
40%
30%
20% £200
16% 20%
10%
£169
13% £0 £111
10%

5% 10% Source: Department for Work and Pensions

4% 7%
Custom charts like these are created by generating simpler visualisations
4% 50% 10% with tools like D3 and or Datawrapper, outputting as PDF/SVG and then
enhancing and adapting the graphic in Adobe Illustrator.
Poorest

Source: Wealth & Assets Survey 2014-16

CONCLUSION
 CONCLUSION
Feedback
This style guide is a collection of rules and guides I had made for myself,
over a range of projects, to keep my own work consistent.
NEXT STEPS
By opening it open for all to share, I’m hoping it will make everyone’s work a
This guide has focused on the general principles of better information little easier, and maybe a little more beautiful.
design, but it does rasie issues around the format and technology we
should / could be using to produce our work (including this document). But, it’s a work in progress! So please let me know if you spot any issues,
find things that don’t work for you, or need anyhting else covered.

Roads? Where we're going, we don't need roads. Email: mike.brondbjerg@london.gov.uk

- Dr. Emmett Brown, Back to the Future5

References:
Can we aim to produce more of our work as “digital first”?
Producing content for the web, simplifies navigation issues, helps keep 1. Captain Barbossa - Pirates of the Caribbean
- https://www.imdb.com/title/tt0325980/
chart and document text consistent, makes labelling more dynamic, charts
2. Data Visualisation by Andy Kirk
more accessible and creates opportunity for richer, deeper, personalised - http://www.visualisingdata.com/book/
interaction and discovery. It also allows content to be kept up to date, eases 3. Dieter Rams – 10 Principles of good design
- https://en.wikipedia.org/wiki/Dieter_Rams
sharing an extends the reach of content.
4. The Visual Display of Quantitative Information - Edward Tufte
- https://www.edwardtufte.com/tufte/books_vdqi
If we can better define who our users are, what they need, and work on 5. Dr. Emmett Brown – Back to the Future
tools, platforms & training to support easier web publishing, perhaps we can - https://www.imdb.com/title/tt0088763/

move faster toward producing work as “digital first”.

 CONCLUSION
Guidance / How To
1. Policy Viz - https://policyviz.com/2018/08/07/dataviz-cheatsheet/
2. Datawrapper How To - https://academy.datawrapper.de/
FURTHER READING 3. Scott Murray D3 Book - http://alignedleft.com/work/d3-book
4. Netflix’s Elijah Meeks - https://medium.com/@Elijah_Meeks/
Not exhaustive (at all), but a hopefully useful collection of articles, podcasts, 5. Nathan Yau Tutorials (R) - https://flowingdata.com/category/tutorials/
tools & resources from around the data viz world. 6. Stephanie Evergreen (Excel)- https://stephanieevergreen.com/how-to/

Data Viz Reading & Listening Resource Lists & Tools

1. FT Chart doctor - https://www.ft.com/chart-doctor 1. Viz Palette Tool - https://projects.susielu.com/viz-palette
2. Datawrapper Blog - https://blog.datawrapper.de/ 2. Chroma.js Colour Scale Tool - https://gka.github.io/palettes
3. ONS Style - https://style.ons.gov.uk/category/data-visualisation/ 3. HEX to RGB Conversion Tool - https://bjoernkw.github.io/hexrgb/
4. Andy Kirk’s Blog - http://www.visualisingdata.com/blog/ 4. Andy Kirk:
5. PolicyViz - https://policyviz.com/ Chartmaker Directory - http://chartmaker.visualisingdata.com/
6. DataViz Today Podcast - https://dataviztoday.com/ Resources - http://www.visualisingdata.com/resources/
7. Data Stories Podcast - http://datastori.es/ 5. Lena Groeger Resources: http://lenagroeger.com/resources/
8. Inspiration from IIB - https://www.informationisbeautifulawards.com/ 6. Datawrapper - https://www.datawrapper.de/
7. D3 - https://d3js.org/
Chart Choosers 8. DC.js - https://dc-js.github.io/dc.js/
1. FT Visual Vocabulary - http://ft.com/vocabulary 9. C3.js - https://c3js.org/
2. Data Viz Project - https://datavizproject.com/ 10. Flourish - https://flourish.studio/
3. Data Viz Catalogue - https://datavizcatalogue.com/ 11. Kepler.gl - https://kepler.gl/#/
4. Data To Viz - https://www.data-to-viz.com/ 12. A new “Illustrator” from Adobe - http://www.data-illustrator.com/
 CONCLUSION
Blue LDN Dk Pink Yellow Red Green Purple Turquoise Pink Orange LDN Pink

QUICK STYLE REFERENCE #6da7de

109,167,222
#9e0059
158,0,89
#dee000
222,224,0
#d82222
216,34,34
#5ea15d
94,161,93
#943fa6 #63c5b5 #ff38ba #eb861e #ee266d
148,63,166 99,197,181 255,56,186 235,134,30 238,38,109

Light BG Light Chart BG Light BG Light BG Dark BG Dark Chart BG Dark BG Dark BG
A Chart Title Context Data Highlight Area Strong Grid Light Grid Context Data Highlight Area Strong Grid Light Grid

Axis Tick Previous Peak

1939: 8.6m
#cccccc 4% #000000 #666666 #d8d8d8 #ffffff 4% #ffffff #ffffff #4e5254
204,204,204 0,0,0 102,102,102 216,216,216 255,255,255 255,255,255 255,255,255 78,82,84
Small Axis Tick 1939
Previous Peak Document Document Axis Text Highlighted Chart Chart
1939: 8.6m Headlines Body Text & Labels Labels Label Black Label White

Focus 40%
37%
1939 #666666 #353d42 #000000
#353d42 #666666 #ffffff
53,61,66 102,102,102 102,102,102 53,61,66 0,0,0 255,255,255

Comparison

Dark App Dark Panel LDN Grey LDN Dark LDN Light White Light App
Part of a whole (not comparison)
0% 50% Something 68% 100%
#121516 #1b2021 #353d42 #2a3135 #868b8e #ffffff #f5f5f5
80% 18,21,22 27,32,33 53,61,66 42,49,53 134,139,142 255,255,255 245,245,245
68%
lighter grey Base for web Web app UI London.gov.uk London.gov.uk London.gov.uk Printed page Light base for
applications panels style panels dark UI light UI and simple app web apps

Stacked bar elements seperated by thin keyline

London 33.3% 33.3% 33.3%

Written by: Mike Brondbjerg, City Intelligence
Email: mike.brondbjerg@london.gov.uk
Version: 2.0
Date: May 2019