Simple-charts

KO | EN

gitlite — search

#javascript #hacktoberfest #react #machine-learning #deep-learning #docker #nodejs #cli #kubernetes #awesome-list #security #ios #openai #open-source

(★ 19)

Simple responsive charts

Simple-charts Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Welcome to the ONS chart template repo :bar_chart: :chart_with_upwards_trend: :chart_with_downwards_trend:

We also have a [maps repo](https://github.com/ONSvisual/maptemplates)
and a [beeswarm repo](https://github.com/ONSvisual/beeswarm) and some [census charts](https://github.com/ONSvisual/census-charts) which is a work in progress.

## Getting started

The [wiki](https://github.com/ONSvisual/Simple-charts/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
* [View all graphs in list](http://onsvisual.github.io/Simple-charts/showcase/) *

|Chart type | Graphic | Code | Accessible |
|:--- |:--- |:--- |:--- |
|Area - stacked | [View](https://onsvisual.github.io/Simple-charts/all-templates/stacked-area) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/stacked-area) | &cross; |
|Area - stacked - small multiple | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-stacked-area) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiple-stacked-area) | &cross; |
|Bar | [View](https://onsvisual.github.io/Simple-charts/all-templates/simple-bar-horizontal) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/simple-bar-horizontal) | &cross; |
|Bar - small multiple | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-bar-horizontal) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiple-bar-horizontal) | &cross; |
|Bar - grouped | [View](https://onsvisual.github.io/Simple-charts/all-templates/clustered-bar-horizontal/) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/clustered-bar-horizontal) | &cross; |
|Bar - grouped with confidence intervals - small multiple | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-horizontal-clustered-bar-chart-confidence-intervals) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiple-horizontal-clustered-bar-chart-confidence-intervals) | &cross; |
|Bar - grouped with confidence intervals - small multiple - linear x-axis | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-horizontal-clustered-bar-confidence-intervals-linear-axis) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiple-horizontal-clustered-bar-confidence-intervals-linear-axis) | &cross; |
|Bar - stacked | [View](https://onsvisual.github.io/Simple-charts/all-templates/stacked-bar-horizontal) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/stacked-bar-horizontal) | &cross; |
|Bar and map | [View](https://onsvisual.github.io/Simple-charts/all-templates/regional-map-bar) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/regional-map-bar) | &cross; |
|Bump | [View](https://onsvisual.github.io/Simple-charts/all-templates/bump-chart/) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/bump-chart/) | &cross; |
|Circle - category | [View](https://onsvisual.github.io/Simple-charts/all-templates/circle-category) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/circle-category/) | &cross; |
|Circle - timeline | [View](https://onsvisual.github.io/Simple-charts/all-templates/circle-timeline) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/circle-timeline) | &cross; |
|Column | [View](https://onsvisual.github.io/Simple-charts/all-templates/simple-bar-vertical) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/simple-bar-vertical) | &cross; |
|Column - grouped | [View](https://onsvisual.github.io/Simple-charts/all-templates/clustered-bar-vertical/) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/clustered-bar-vertical) | &cross; |
|Column - grouped - small multiple | [View](http://onsvisual.github.io/Simple-charts/all-templates/small-multiples-grouped-column/index.html) | [< />](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiples-grouped-column) | &cross; |
|Column - stacked | [View](https://onsvisual.github.io/Simple-charts/all-templates/stacked-bar-vertical) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/stacked-bar-vertical) | &cross; |
|Column - stacked - small multiple | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-stacked-bar-vertical) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiple-stacked-bar-vertical) | &cross; |
|Column - grouped and stacked - small multiple | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiples-stacked-bar) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiples-stacked-bar) | &cross; |
|Column - stacked with negatives | [View](https://onsvisual.github.io/Simple-charts/all-templates/stacked-bar-vertical-with-negatives/) | [</>](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/stacked-bar-vertical-with-negatives) | &cross; |
|Column and line | [View](https://onsvisual.github.io/Simple-charts/all-templates/bar-and-line/) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/bar-and-line) | &cross; |
|Connected dot plot | [View](https://onsvisual.github.io/Simple-charts/all-templates/tie-fighter) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/tie-fighter) | &cross; |
|Connected dot plot - buttons | [View](https://onsvisual.github.io/Simple-charts/all-templates/tiefighter-with-buttons) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/tiefighter-with-buttons) | &cross; |
|Dot plot with jiggle | [View](https://onsvisual.github.io/Simple-charts/all-templates/dot-plot-jiggle) |[`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/dot-plot-jiggle) | &cross; |
|Heatmap | [View](https://onsvisual.github.io/Simple-charts/all-templates/heatmap) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/heatmap) | &cross; |
|Histogram| [View](https://onsvisual.github.io/Simple-charts/all-templates/histogram/) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/histogram) | &cross; |
|Line | [View](https://onsvisual.github.io/Simple-charts/all-templates/line) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/line) | &cross; |
|Line - small multiple | [View](https://onsvisual.github.io/Simple-charts/all-templates/small-multiple-line) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/small-multiple-line) | &cross; |
|Line - ordinal | [View](https://onsvisual.github.io/Simple-charts/all-templates/line-ordinal) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/line-ordinal) | &cross; |
|Line - ordinal band | [View](https://onsvisual.github.io/Simple-charts/all-templates/line-ordinal-band) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/line-ordinal-band) | &cross; |
|Line - shaded area | [View](https://onsvisual.github.io/Simple-charts/all-templates/line-with-difference) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/line-with-difference) | &cross; |
|Line - stacked | [View](https://onsvisual.github.io/Simple-charts/all-templates/stacked-lines) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/stacked-lines) | &cross; |
|Line - dropdown | [View](https://onsvisual.github.io/Simple-charts/all-templates/line-with-dropdown) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/line-with-dropdown) | &cross; |
|Marimekko | [View](https://onsvisual.github.io/Simple-charts/all-templates/marimekko) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/marimekko) | &cross; |
|Quiz | [View](https://onsvisual.github.io/Simple-charts/all-templates/quiz) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/quiz) | &cross; |
|Sankey | [View](https://onsvisual.github.io/Simple-charts/all-templates/sankey) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/sankey) | &cross; |
|Scatter - canvas | [View](https://onsvisual.github.io/Simple-charts/all-templates/scatter-canvas) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/scatter-canvas) | &cross; |
|Scatter - voronoi | [View](https://onsvisual.github.io/Simple-charts/all-templates/scatter-voronoi) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/scatter-voronoi) | &check; |
|Scatter - voronoi - dropdown | [View](https://onsvisual.github.io/Simple-charts/all-templates/scatter-voronoi-dropdown) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/scatter-voronoi-dropdown) | &cross; |
|Scatter - groups | [View](https://onsvisual.github.io/Simple-charts/all-templates/scatter-with-groups) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/scatter-with-groups) | &cross; |
|Slope | [View](https://onsvisual.github.io/Simple-charts/all-templates/slope) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/slope) | &cross; |
|Slope - small multiple | [View](https://onsvisual.github.io/Simple-charts/all-templates/slope-multiple) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/slope-multiple) | &cross; |
|Slope - voronoi | [View](https://onsvisual.github.io/Simple-charts/all-templates/slope-voronoi) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/slope-voronoi) | &cross; |
|Split bar | [View](https://onsvisual.github.io/Simple-charts/all-templates/split-bar) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/split-bar) | &check; |
|Split bar - small multiple | [View](https://onsvisual.github.io/Simple-charts/all-templates/split-bar-multiple) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/split-bar-multiple) | &check; |
|Split bar - varied x scales | [View](https://onsvisual.github.io/Simple-charts/all-templates/split-bar-varied-xscales) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/split-bar-varied-xscales) | &check; |
|Waffle - circle | [View](https://onsvisual.github.io/Simple-charts/all-templates/icon-array) | [`</>`](https://github.com/ONSvisual/Simple-charts/tree/master/all-templates/icon-array) | &cross; |

##### NB

These charts use D3v4. Head over to the [D3v3 branch](https://github.com/ONSvisual/Simple-charts/tree/d3v3) if that's your thing.

## Current colour palette (as at 21 May 2021)

These colours are from the [ONS Brand Guidelines](https://www.notion.so/Colours-9cd14589e0764e33a3b3c5a6762f37ae),
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](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/206095.png) `#206095`
* ![#27A0CC](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/27A0CC.png) `#27A0CC`
* ![#003C57](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/003C57.png) `#003C57`
* ![#118C7B](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/118C7B.png) `#118C7B`
* ![#A8BD3A](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/A8BD3A.png) `#A8BD3A`
* ![#871A5B](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/871A5B.png) `#871A5B`
* ![#F66068](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/F66068.png) `#F66068`
* ![#746CB1](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/746CB1.png) `#746CB1`
* ![#22D0B6](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/22D0B6.png) `#22D0B6`

["#206095", "#27A0CC", "#003C57", "#118C7B", "#A8BD3A", "#871A5B", "#F66068", "#746CB1", "#22D0B6"]

### Alternate chart colour order (five colours)

["#206095", "#27A0CC", "#871A5B", "#A8BD3A", "#F66068"]

### Highlight colour

* !["#F39431"](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/F39431.png) `#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](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/A8BD3A.png) `#A8BD3A`  > ![#8A9B2E](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/8A9B2E.png) `#8A9B2E`

Mint green
![#22D0B6](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/22D0B6.png)`#22D0B6` > ![#1AA590](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/1AA590.png)`#1AA590`

Highlight orange
![#F39431](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/F39431.png)`#F39431` > ![#F56927](https://raw.githubusercontent.com/ONSvisual/Simple-charts/master/img/F56927.png)`#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
Financial and Insurance Activities | Finance
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
Public admin and Defence; Compulsory Social Security | Public administration
Education|	Education
Human Health And Social Work Activities|	Health
Arts, Entertainment And Recreation|	Arts and recreation
Other Service Activities|	Other services

As used in [this example](https://www.ons.gov.uk/employmentandlabourmarket/peopleinwork/earningsandworkinghours/articles/professionalandscientificindustrytheonlyonewherepaycontinuestomatchrisingprices/2022-11-23).

Simple-charts

Simple-charts Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Simple-charts

Simple-charts Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README