Skip to content

Files

Latest commit

 

History

History

guidelines

README.md

Economics Observatory Visualisation Guidelines

Branding guidelines | Charting guidelines | Coding guidelines

At the Observatory, we strive to follow current best practices to stay up to date with recent developments of the rapidly-changing world of data visualisation. We maintain a set of guidelines that we use internally for designing our visualisations - but they are also free to share and please feel free to raise an Issue if you have any suggestions, everyone and everything is welcome! 💙 Why do we think this is important? - I'll let dataviz economist Jonathan Schwabish, author of Better Data Visualizations do the convincing.

👓 Branding guidelines

Logos

Banner
Social header
Square icon
Square brandmark
Icon dark
Icon light
Logo dark
Logo light
Background dark
Background light
Pattern dark
Pattern light

You will find all logo source files in this folder.

Fonts

Logo Circular, sans-oserif
Primary Spectral Light, serif
Secondary Work Sans, sans-serif
Title Spectral, serif
Subtitle Work Sans, sans-serif
Headings Work Sans, sans-serif
Subheadings Spectral, sans-serif

You will find all the font source files in this folder.

Colors

The two main colors we always use are the logo colors:

ECO dot
 #F4134D rgb(244,19,77)
ECO background
 #122B39 rgb(18,43,57)

Legacy logo colors that we do not use anymore, but you may still find on some of our older charts:

ECO red
 #E54753 rgb(229,71,83)
ECO blue
 #243B5A rgb(36,59,90)

On top of this, we try to limit our color palette to the following 9 colors, in this order of preference:

ECO turquiose
 #36B7B4 rgb(54,183,180)
ECO pink
 #E6224B rgb(230,34,75)
ECO yellow
 #F4C245 rgb(244,194,69)
ECO mid-blue
 #0063AF rgb(0,99,175)
ECO green
 #00A767 rgb(0,167,103)
ECO light-blue
 #179FDB rgb(23,159,219)
ECO orange
 #EB5C2E rgb(235,92,46)
ECO purple
 #5C267B rgb(92,38,123)
ECO dark-blue
 #122B39 rgb(18,43,57)

On top of this, we have one service colour:

ECO gray
 #676A86 rgb(103,106,134)

Axes, tick marks, tick labels, grids and axis labels are always drawn in ECO gray. Unless encoded to represent a data category, annotations also use ECO gray.

Color scales

Category

                     

Single-hue

            

Multi-hue

               

Diverging

               

You will find json files for each of these color scales, as well as the ECO color names in this folder. If you are not an alien 👽 who can read hex codes natively, we prefer the HSL, or even better, the HCL (sometimes called CIELuv) color space, for which hclwizard is a good and HSLuv is even better tool. If we need to just quickly generate a custom but still beautiful color scale, the more generic tools we love are:

Opacity

If any chart needs custom colour opacity levels, the preferred way is to use the rgba codes from the color table, with an alpha value between 0.3 and 0.9.

  • The default opacity for bar charts is 0.8.
  • The default opacity for area charts is 0.8. If possible, area charts will carry an opacity gradient between 0 and 0.9, from base to peak, with a gradient angle of ~60-70 degrees.

Line style

Our preferred line-style is always solid ▬ 2px. Secondary lines are shown in solid — 1px, tertiary lines are shown in dashed -- 1px, while quaternary lines are dotted ··· 1px. It is always desirable to change the color attribute first to differentiate between nominal data categories, before turning to changing the line-style, unless otherwise defined by the visualisation conditions (e.g. monochrome chart).

Defaults

UK countries

England
ECO purple
 #5C267B rgb(92,38,123)
Wales
ECO pink
 #E6224B rgb(230,34,75)
Scotland
ECO mid-blue
 #0063AF rgb(0,99,175)
Northern Ireland
ECO green
 #00A767 rgb(0,167,103)

🌌 Charting guidelines

For every chart we create, we try to prametrise as much as possible, loading the color schemes and styles directly from this guideline repository folder. This allows us to maintain a consistent style for our charts and, if needed, correct appearance bugs and update all charts created in the past with new styles. Learn more about how do we accomplish this in the Code section. The inspiration comes from the Urban Institute's Dataviz Styleguide. Whenever possible, we try to automate the applying of styles to plots through themes. For Vega, themes look like this, which also translates to Altair.

The aesthetic zens we follow are those of:

When creating charts, usually the first step is to envisage the type of chart that can accurately represent the underlying data, with all of its internal complexity. In order to help with this process, we can use a visual vocabulary. A few good ones are:

🍨 Visualisaton types

Line plot

Line plots are excellent for showing temporal changes in data.

Here are all the line plots that we have created:

Line plot with confidence bands

Area chart

Column chart Bar chart

Scatter plot

Dot plot

Box plot/Violin plot

Piechart Donut chart

3D Scatter Heatmap

Treemap

Packed circles
z

Parallel coordinates

Sankey diagram

Priestley diagram

Network diagram

Choropleth map

Scatter map

Arc map

Dorling cartogram

👩‍💻 Coding guidelines

When creating explorable charts, interactives or dashboards, the tools we use are:

  • Panel in Anaconda's Holoviz package (also known for Bokeh) for easy interactivity and mixed chart types
  • Grafana for something beautiful from streaming or lots of data
  • Superset for an all-out open-source BI dashboard (albeit with a steep learning curve!)
  • PowerBI if open source is not so important

The coding zens we follow are those of:

Python/Jupyter/Google Colab

matplotlib

Vega/Vega-lite/Voyager/Lyra

D3.js/D3plus/NVD3

eCharts

Docker

Make sure you check out the 📐Data Guidelines ↗ too!

Updated on 📆 2021-10-04 by Dénes Csala