Welcome to the ONS chart template repo 📊 📈 📉
We also have a maps repo and a beeswarm repo
Getting started
The wiki instructions on how to use each template.
If you download the zip of the repo, you'll find a folder for every template. These templates runs off core libraries in the folder lib and images in images. Each visualisation is customisable using the options in the config.json file. It reads data from a data.csv file.
See them in action
| Chart type | Graphic | Code | Accessible |
|---|---|---|---|
| Area - stacked | View | </> |
✗ |
| Area - stacked - small multiple | View | </> |
✗ |
| Bar | View | </> |
✗ |
| Bar - small multiple | View | </> |
✗ |
| Bar - grouped | View | </> |
✗ |
| Bar - grouped with confidence intervals - small multiple | View | </> |
✗ |
| Bar - grouped with confidence intervals - small multiple - linear x-axis | View | </> |
✗ |
| Bar - stacked | View | </> |
✗ |
| Bar and map | View | </> |
✗ |
| Bump | View | </> |
✗ |
| Circle - category | View | </> |
✗ |
| Circle - timeline | View | </> |
✗ |
| Column | View | </> |
✗ |
| Column - grouped | View | </> |
✗ |
| Column - grouped - small multiple | View | < /> | ✗ |
| Column - stacked | View | </> |
✗ |
| Column - stacked - small multiple | View | </> |
✗ |
| Column - grouped and stacked - small multiple | View | </> |
✗ |
| Column - stacked with negatives | View | </> | ✗ |
| Column and line | View | </> |
✗ |
| Connected dot plot | View | </> |
✗ |
| Connected dot plot - buttons | View | </> |
✗ |
| Dot plot with jiggle | View | </> |
✗ |
| Heatmap | View | </> |
✗ |
| Line | View | </> |
✗ |
| Line - small multiple | View | </> |
✗ |
| Line - ordinal | View | </> |
✗ |
| Line - ordinal band | View | </> |
✗ |
| Line - shaded area | View | </> |
✗ |
| Line - stacked | View | </> |
✗ |
| Line - dropdown | View | </> |
✗ |
| Marimekko | View | </> |
✗ |
| Quiz | View | </> |
✗ |
| Sankey | View | </> |
✗ |
| Scatter - canvas | View | </> |
✗ |
| Scatter - voronoi | View | </> |
✓ |
| Scatter - voronoi - dropdown | View | </> |
✗ |
| Scatter - groups | View | </> |
✗ |
| Slope | View | </> |
✗ |
| Slope - small multiple | View | </> |
✗ |
| Slope - voronoi | View | </> |
✗ |
| Split bar | View | </> |
✓ |
| Split bar - small multiple | View | </> |
✓ |
| Split bar - varied x scales | View | </> |
✓ |
| Waffle - circle | View | </> |
✗ |
NB
These charts use D3v4. Head over to the D3v3 branch if that's your thing.
Current colour palette (as at 21 May 2021)
These colours are from the ONS Brand Guidelines, and are shown here for convenience. We are in the process of updating the templates to match these colour palettes.
Primary chart colour palette (nine colours)
#206095
#27A0CC
#003C57
#118C7B
#A8BD3A
#871A5B
#F66068
#746CB1
#22D0B6
["#206095", "#27A0CC", "#003C57", "#118C7B", "#A8BD3A", "#871A5B", "#F66068", "#746CB1", "#22D0B6"]
Alternate chart colour order (five colours)
-
#206095 -
#27A0CC -
#871A5B -
#A8BD3A -
#F66068
["#206095", "#27A0CC", "#871A5B", "#A8BD3A", "#F66068"]
Highlight colour
#F39431
Adjustments for text
If using these colours for direct labelling, some need to be made darker to meet contrast guidelines. For text at least 14pt in bold or 18pt in regular text, these colours are 3:1 contrast against white.
Spring green
#A8BD3A > 
#8A9B2E
Mint green
#22D0B6 > 
#1AA590
Highlight orange
#F39431 > 
#F56927
The primary and alternate palettes, with these adjustments for labelling applied, are as follows:
["#206095", "#27A0CC", "#003C57", "#118C7B", "#8A9B2E", "#871A5B", "#F66068", "#746CB1", "#1AA590"]
["#206095", "#27A0CC", "#871A5B", "#8A9B2E", "#F66068"]
Short category names
Sometimes names for statistical categories are very technical or specific, and for good reason, because you need to be clear about what data represents. However, these names are often too wordy or difficult for the general public to comprehend and a short version communicates the numbers to the public more effectively.
This is a place to put shortened names to avoid duplicating work, plus we should try to be consistent. If you think a name needs changing, they are always up for discussion.
Industries (SIC codes)
| SIC code name | Short name |
|---|---|
| Manufacturing | Manufacturing |
| Water Supply, Sewerage, Waste Management And Remediation Activities | Water |
| Construction | Construction |
| Wholesale And Retail Trade; Repair Of Motor Vehicles And Motorcycles | Retail |
| Transportation And Storage | Transport and storage |
| Accommodation And Food Service Activities | Hospitality |
| Information And Communication | Information and communication |
| Real Estate Activities | Property |
| Professional, Scientific And Technical Activities | Professional and scientific |
| Administrative And Support Service Activities | Administration |
| Education | Education |
| Human Health And Social Work Activities | Health |
| Arts, Entertainment And Recreation | Arts and recreation |
| Other Service Activities | Other services |