├── .github
└── workflows
│ └── render-readme.yaml
├── .gitignore
├── Modularisation_notes.md
├── README.Rmd
├── README.md
├── area-stacked-sm
├── chart.css
├── config.js
├── data.csv
├── fallback.png
├── index.html
└── script.js
├── area-stacked
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── bar-chart-horizontal-clustered-sm
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── bar-chart-horizontal-clustered
├── .DS_Store
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── bar-chart-horizontal-grouped-clustered
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── bar-chart-horizontal-grouped
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── bar-chart-horizontal-sm-colour
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── bar-chart-horizontal-sm
├── chart.css
├── config.js
├── data.csv
├── fallback.png
├── index.html
└── script.js
├── bar-chart-horizontal-stacked-clustered-grouped
├── chart.css
├── config.js
├── data.csv
├── fallback.png
├── index.html
└── script.js
├── bar-chart-horizontal-stacked-clustered
├── chart.css
├── config.js
├── data.csv
├── fallback.png
├── index.html
└── script.js
├── bar-chart-horizontal-stacked-grouped
├── chart.css
├── config.js
├── data.csv
├── fallback.png
├── index.html
└── script.js
├── bar-chart-horizontal-stacked-sm
├── chart.css
├── config.js
├── data.csv
├── fallback.png
├── index.html
└── script.js
├── bar-chart-horizontal-stacked-with-tooltip
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── bar-chart-horizontal-stacked
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── bar-chart-horizontal-with-dropdown
├── chart.css
├── config.js
├── css
│ └── chosen.css
├── data.csv
├── fallback.png
├── images
│ ├── chosen-sprite.png
│ ├── chosen-sprite@2x.png
│ ├── icons--chevron-down.svg
│ ├── x_close.svg
│ └── x_close_slate.svg
├── index.html
├── js
│ ├── chosen.jquery.js
│ └── jquery-3.0.0.slim.min.js
└── script.js
├── bar-chart-horizontal-with-reference-line
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── bar-chart-horizontal-with-reference-sm
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── bar-chart-horizontal
├── chart.css
├── config.js
├── data.csv
├── fallback.png
├── index.html
└── script.js
├── bar-comet-dot-range-plot
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── beeswarm
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── bubble-chart-animated
├── chart.css
├── config.js
├── css
│ ├── bootstrap.min.css
│ ├── chosen-sprite.png
│ ├── chosen-sprite@2x.png
│ ├── chosen.css
│ └── mapbox-gl.css
├── data.csv
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
├── images
│ ├── chosen-sprite.png
│ ├── chosen-sprite@2x.png
│ ├── fast-forward.png
│ ├── fast-forward.svg
│ ├── icons--chevron-down.svg
│ ├── pause.png
│ ├── pause.svg
│ ├── play.png
│ ├── play.svg
│ ├── rewind.png
│ ├── rewind.svg
│ ├── x_close.svg
│ └── x_close_slate.svg
├── index.html
└── script.js
├── chart-menu
├── CB_images
│ ├── area.png
│ ├── bar_and_line.png
│ ├── bars_with_confidence.png
│ ├── group_hoz_bar.png
│ ├── group_v_bar.png
│ ├── group_v_bar_spread.png
│ ├── grouped_hoz_bar_spread.png
│ ├── simple_hoz_bar.png
│ ├── simple_hoz_bar_highlight.png
│ ├── simple_line.png
│ ├── stacked_hoz_bar.png
│ ├── stacked_hoz_bar_spread.png
│ ├── stacked_v_bar.png
│ ├── stacked_v_bar_hundred.png
│ ├── stacked_v_bar_hundred_colour.png
│ ├── stacked_v_bar_snake.png
│ └── stacked_v_bar_spread.png
├── chart.css
├── chartConfig.js
├── config.js
├── data.csv
├── html2canvas.js
├── index.html
├── script.js
└── test.js
├── column-chart-clustered
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── column-chart-sm
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── column-chart-stacked-sm
├── chart.css
├── config.js
├── data.csv
├── fallback.png
├── index.html
└── script.js
├── column-chart-stacked-with-line-sm
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── column-chart-stacked-with-line
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── column-chart-stacked
├── chart.css
├── config.js
├── data.csv
├── fallback.png
├── index.html
└── script.js
├── column-chart-with-ci-sm
├── chart.css
├── config.js
├── data.csv
├── datanumeric.csv
├── index.html
└── script.js
├── column-chart
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── comet-clustered
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── comet-plot
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── dot-plot-with-ci-sm
├── chart.css
├── config.js
├── data.csv
├── datanumeric.csv
├── dropdown.css
├── index.html
└── script.js
├── dot-plot
├── .DS_Store
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── doughnut
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── heatmap-per-column
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── heatmap
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── lib
├── annotations.js
├── chroma.min.js
├── d3-array.js
├── globalStyle.css
├── helpers.js
├── labelplacer.js
└── simple-statistics.min.js
├── line-chart-sm-colours
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── line-chart-sm
├── chart.css
├── config.js
├── data.csv
├── datanumeric.csv
├── index.html
└── script.js
├── line-chart-with-area
├── chart.css
├── config.js
├── data.csv
├── datanumeric.csv
├── index.html
└── script.js
├── line-chart-with-ci-sm
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── line-chart
├── chart.css
├── config.js
├── data.csv
├── datanumeric.csv
├── index.html
└── script.js
├── population-pyramid-static-with-comparison
├── chart.css
├── comparison.csv
├── config.js
├── data.csv
├── index.html
└── script.js
├── population-pyramid-static
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── population-pyramid-with-comparison-toggle
├── chart.css
├── comparison-time.csv
├── comparison.csv
├── config.js
├── data.csv
├── index.html
└── script.js
├── population-pyramid-with-dropdown-and-interactive-comparison
├── chart.css
├── comparison.csv
├── config.js
├── css
│ └── chosen.css
├── data.csv
├── images
│ ├── chosen-sprite.png
│ ├── chosen-sprite@2x.png
│ ├── icons--chevron-down.svg
│ ├── x_close.svg
│ └── x_close_slate.svg
├── index.html
├── js
│ ├── chosen.jquery.js
│ └── jquery-3.0.0.slim.min.js
└── script.js
├── population-pyramid-with-dropdown
├── chart.css
├── comparison.csv
├── config.js
├── css
│ └── chosen.css
├── data.csv
├── images
│ ├── chosen-sprite.png
│ ├── chosen-sprite@2x.png
│ ├── icons--chevron-down.svg
│ ├── x_close.svg
│ └── x_close_slate.svg
├── index.html
├── js
│ ├── chosen.jquery.js
│ └── jquery-3.0.0.slim.min.js
└── script.js
├── range-plot-sm
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── range-plot
├── .DS_Store
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── refresh.bat
├── ridgeline-plot
├── chart.css
├── config.js
├── data.csv
├── fallback.png
├── index.html
└── script.js
├── scatter-plot-animated
├── chart.css
├── config.js
├── css
│ ├── bootstrap.min.css
│ ├── chosen-sprite.png
│ ├── chosen-sprite@2x.png
│ ├── chosen.css
│ └── mapbox-gl.css
├── data.csv
├── datadownload.xlsx
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
├── images
│ ├── chosen-sprite.png
│ ├── chosen-sprite@2x.png
│ ├── fast-forward.png
│ ├── fast-forward.svg
│ ├── icons--chevron-down.svg
│ ├── pause.png
│ ├── pause.svg
│ ├── play.png
│ ├── play.svg
│ ├── rewind.png
│ ├── rewind.svg
│ ├── x_close.svg
│ └── x_close_slate.svg
├── index.html
└── script.js
├── scatter-plot-sm
├── chart.css
├── config.js
├── data.csv
├── dropdown.css
├── fallback.png
├── index.html
└── script.js
├── scatter-plot
├── chart.css
├── config.js
├── data.csv
├── dropdown.css
├── fallback.png
├── index.html
└── script.js
├── schema.JSON
├── slope-chart
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
├── split-bar-chart
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
└── z-annotation-example
├── chart.css
├── config.js
├── data.csv
├── index.html
└── script.js
/.github/workflows/render-readme.yaml:
--------------------------------------------------------------------------------
1 | name: Render README
2 |
3 | on:
4 | push:
5 | branches: [main]
6 |
7 | jobs:
8 | render:
9 | runs-on: ubuntu-latest
10 |
11 | steps:
12 | - uses: actions/checkout@v4
13 |
14 | - uses: r-lib/actions/setup-pandoc@v2
15 |
16 | - name: Set up R
17 | uses: r-lib/actions/setup-r@v2
18 |
19 | - name: Install rmarkdown
20 | run: |
21 | install.packages(c("knitr", "rmarkdown"))
22 | shell: Rscript {0}
23 |
24 | - name: Render README.Rmd
25 | run: |
26 | rmarkdown::render("README.Rmd")
27 | shell: Rscript {0}
28 |
29 | - name: Commit rendered README.md
30 | run: |
31 | git config --global user.name "github-actions"
32 | git config --global user.email "github-actions@github.com"
33 | git add README.md
34 | git commit -m "Render README.md from README.Rmd" || echo "No changes to commit"
35 | git push
36 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .vscode/settings.json
3 | .Rproj.user
4 | *.Rproj
--------------------------------------------------------------------------------
/area-stacked-sm/chart.css:
--------------------------------------------------------------------------------
1 | #legend {
2 | display: grid;
3 | align-items: center;
4 | padding-bottom: 20px;
5 | }
--------------------------------------------------------------------------------
/area-stacked-sm/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/area-stacked-sm/fallback.png
--------------------------------------------------------------------------------
/area-stacked-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Small Multiple Stacked Area Chart
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/area-stacked/chart.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/area-stacked/chart.css
--------------------------------------------------------------------------------
/area-stacked/data.csv:
--------------------------------------------------------------------------------
1 | date,category one,category two has a really long name and takes a lot of space,category three,category four,category five,category six
2 | 1997,0.150000,0.150000,0.150000,0.150000,0.150000,0.250000
3 | 1998,0.150000,0.150000,0.150000,0.150000,0.150000,0.250000
4 | 1999,0.150000,0.150000,0.150000,0.150000,0.150000,0.250000
5 | 2000,0.150000,0.150000,0.150000,0.150000,0.150000,0.250000
6 | 2001,0.150000,0.150000,0.150000,0.150000,0.150000,0.250000
7 | 2002,0.150000,0.150000,0.150000,0.150000,0.150000,0.250000
8 | 2003,0.150000,0.150000,0.150000,0.150000,0.150000,0.250000
9 | 2004,0.150000,0.150000,0.150000,0.150000,0.150000,0.250000
10 | 2005,0.140000,0.140000,0.140000,0.140000,0.140000,0.300000
11 | 2006,0.140000,0.140000,0.140000,0.140000,0.140000,0.300000
12 | 2007,0.140000,0.140000,0.140000,0.140000,0.140000,0.300000
13 | 2008,0.140000,0.140000,0.140000,0.140000,0.140000,0.300000
14 | 2009,0.140000,0.140000,0.140000,0.140000,0.140000,0.300000
15 | 2010,0.130000,0.130000,0.130000,0.130000,0.130000,0.350000
16 | 2011,0.130000,0.130000,0.130000,0.130000,0.130000,0.350000
17 | 2012,0.130000,0.130000,0.130000,0.130000,0.130000,0.350000
18 | 2013,0.130000,0.130000,0.130000,0.130000,0.130000,0.350000
19 | 2014,0.120000,0.120000,0.120000,0.120000,0.120000,0.400000
20 | 2015,0.120000,0.120000,0.120000,0.120000,0.120000,0.400000
21 | 2016,0.120000,0.120000,0.120000,0.120000,0.120000,0.400000
22 | 2017,0.120000,0.120000,0.120000,0.120000,0.120000,0.400000
--------------------------------------------------------------------------------
/area-stacked/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Stacked Area Chart
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-clustered-sm/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | .chart-container {
7 | display: inline-block;
8 | vertical-align: top;
9 | }
10 |
11 | .chart-container:last-child {
12 | margin-right: 0;
13 | }
14 |
15 |
16 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-clustered-sm/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": ["#206095", "#27A0CC", "#871A5B", "#A8BD3A", "#F66068", "#003C57"],
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary": "The chart canvas is hidden from screen readers. The main message is summarised by the chart title and the data behind the chart is available to download below.",
7 | "dataLabels": {
8 | "show": true,
9 | "numberFormat": ".0%"
10 | },
11 | "xDomain": "auto",
12 | // either "auto" or an array for the x domain e.g. [0,100]
13 | "xAxisLabel": "x axis label"
14 | },
15 | "optional": {
16 | "chart_every": {
17 | "sm": 1,
18 | "md": 1,
19 | "lg": 2
20 | },
21 | // "aspectRatio": {
22 | // "sm": [1, 2],
23 | // "md": [1, 2],
24 | // "lg": [1, 2]
25 | // },
26 | "margin": {
27 | "sm": {
28 | "top": 30,
29 | "right": 20,
30 | "bottom": 50,
31 | "left": 200
32 | },
33 | "md": {
34 | "top": 30,
35 | "right": 20,
36 | "bottom": 50,
37 | "left": 200
38 | },
39 | "lg": {
40 | "top": 30,
41 | "right": 20,
42 | "bottom": 50,
43 | "left": 200
44 | }
45 | },
46 | "chartGap": 10,
47 | "seriesHeight": {
48 | "sm": 60,
49 | "md": 60,
50 | "lg": 60
51 | },
52 | "xAxisTicks": {
53 | "sm": 2,
54 | "md": 2,
55 | "lg": 4
56 | },
57 | "mobileBreakpoint": 510,
58 | "mediumBreakpoint": 600,
59 | "dropYAxis": true
60 | },
61 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
62 | "chart_build": {}
63 | };
64 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-clustered-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Small-multiple Clustered Horizontal Bar Chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-clustered/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bar-chart-horizontal-clustered/.DS_Store
--------------------------------------------------------------------------------
/bar-chart-horizontal-clustered/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-clustered/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "legendLabels": ["Category 1 goes here", "Category 2 goes here"],
5 | "colour_palette": ["#206095", "#27a0cc"],
6 | "sourceText": "Office for National Statistics",
7 | "accessibleSummary": "Here is the screenreader text describing the chart.",
8 | "dataLabels": {
9 | "show": true,
10 | "numberFormat": ".0%"
11 | },
12 | "xDomain": "auto",
13 | // either "auto" or an array for the x domain e.g. [0,100]
14 | "xAxisLabel": "x axis label"
15 | },
16 | "optional": {
17 | "margin": {
18 | "sm": {
19 | "top": 15,
20 | "right": 20,
21 | "bottom": 50,
22 | "left": 120
23 | },
24 | "md": {
25 | "top": 15,
26 | "right": 20,
27 | "bottom": 50,
28 | "left": 120
29 | },
30 | "lg": {
31 | "top": 15,
32 | "right": 20,
33 | "bottom": 50,
34 | "left": 120
35 | }
36 | },
37 | "seriesHeight": {
38 | "sm": 28,
39 | "md": 28,
40 | "lg": 28
41 | },
42 | "xAxisTicks": {
43 | "sm": 4,
44 | "md": 8,
45 | "lg": 10
46 | },
47 | "mobileBreakpoint": 510,
48 | "mediumBreakpoint": 600
49 | },
50 | "elements": { "select": 0, "nav": 0, "legend": 1, "titles": 0 }
51 | };
52 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-clustered/data.csv:
--------------------------------------------------------------------------------
1 | name,category,value
2 | Other services,category 2,0.987848719
3 | Manufacturing,category 2,0.983661406
4 | Construction,category 2,0.681288045
5 | Other services,category 1,0.500002051
6 | Arts,category 2,0.481757214
7 | Manufacturing,category 1,0.246937971
8 | Administrative,category 2,0.209665614
9 | Wholesale trade,category 2,0.176396639
10 | Wholesale trade,category 1,-0.167060372
11 | Construction,category 1,0.064017735
12 | Administrative and supportive service activities,category 1,0.047910167
13 | Arts,category 1,0.018920435
--------------------------------------------------------------------------------
/bar-chart-horizontal-clustered/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Clustered bar chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-grouped-clustered/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-grouped-clustered/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "legendLabels": ["Category 1 goes here", "Category 2 goes here"],
5 | "colour_palette": ["#206095","#27A0CC","#871A5B","#A8BD3A","#F66068"],
6 | "sourceText": "Office for National Statistics",
7 | "accessibleSummary": "Here is the screenreader text describing the chart.",
8 | "dataLabels": {
9 | "show": true,
10 | "numberFormat": ".0%"
11 | },
12 | "xDomain": "auto",
13 | // either "auto" or an array for the x domain e.g. [0,100]
14 | "xAxisLabel": "x axis label"
15 | },
16 | "optional": {
17 | "margin": {
18 | "sm": {
19 | "top": 15,
20 | "right": 20,
21 | "bottom": 50,
22 | "left": 120
23 | },
24 | "md": {
25 | "top": 15,
26 | "right": 20,
27 | "bottom": 50,
28 | "left": 120
29 | },
30 | "lg": {
31 | "top": 15,
32 | "right": 20,
33 | "bottom": 50,
34 | "left": 120
35 | }
36 | },
37 | "seriesHeight": {
38 | "sm": 70,
39 | "md": 70,
40 | "lg": 70
41 | },
42 | "xAxisTicks": {
43 | "sm": 4,
44 | "md": 8,
45 | "lg": 10
46 | },
47 | "mobileBreakpoint": 510,
48 | "mediumBreakpoint": 600
49 | },
50 | "elements": { "select": 0, "nav": 0, "legend": 1, "titles": 0 }
51 | };
52 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-grouped-clustered/data.csv:
--------------------------------------------------------------------------------
1 | name,category,value,group
2 | Other services,category 2,0.987848719,Group name 1
3 | Manufacturing,category 2,0.983661406,Group name 1
4 | Construction,category 2,0.681288045,Group name 1
5 | Other services,category 1,0.500002051,Group name 1
6 | Arts,category 2,0.481757214,Group name 1
7 | Manufacturing,category 1,0.246937971,Group name 1
8 | Administrative,category 2,0.209665614,Group name 1
9 | Wholesale trade,category 2,0.176396639,Group name 1
10 | Wholesale trade,category 1,0.167060372,Group name 1
11 | Construction,category 1,0.064017735,Group name 1
12 | Administrative and supportive service activities,category 1,0.047910167,Group name 1
13 | Arts,category 1,0.018920435,Group name 1
14 | Other services,category 2,-0.049392436,Group name 2
15 | Manufacturing,category 2,0.491830703,Group name 2
16 | Construction,category 2,0.340644023,Group name 2
17 | Other services,category 1,0.250001026,Group name 2
18 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-grouped-clustered/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Grouped, clustered bar chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-grouped/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels {
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | text {
7 | forced-color-adjust: auto;
8 | }
--------------------------------------------------------------------------------
/bar-chart-horizontal-grouped/config.js:
--------------------------------------------------------------------------------
1 | config={
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "legendLabels": {"min":"2015-2019", "max":"2020"},
5 | //the keys match the column names
6 | "colour_palette": "#206095",
7 | "sourceText": "Office for National Statistics",
8 | "accessibleSummary":"This chart has been hidden from screen readers. The main message of the chart is summarised in the chart title.",
9 | "dataLabels":{
10 | "show":true,
11 | "numberFormat":".0%"
12 | },
13 | "xAxisFormat":".0%",
14 | "xAxisLabel":"x-axis label",
15 | "xDomain":"auto"
16 | // either auto or a custom domain as an array e.g [0,100]
17 | },
18 | "optional": {
19 | "margin": {
20 | "sm": {
21 | "top": 5,
22 | "right": 20,
23 | "bottom": 20,
24 | "left": 120
25 | },
26 | "md": {
27 | "top": 5,
28 | "right": 20,
29 | "bottom": 20,
30 | "left": 120
31 | },
32 | "lg": {
33 | "top": 5,
34 | "right": 20,
35 | "bottom": 40,
36 | "left": 160
37 | }
38 | },
39 | "seriesHeight":{
40 | "sm":40,
41 | "md":40,
42 | "lg":40
43 | },
44 | "xAxisTicks":{
45 | "sm":3,
46 | "md":8,
47 | "lg":10
48 | },
49 | "mobileBreakpoint": 510,
50 | "mediumBreakpoint": 600
51 | }
52 | };
53 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-grouped/data.csv:
--------------------------------------------------------------------------------
1 | name,group,value
2 | Detached,Property type,0.7399
3 | Semi-detached,Property type,0.6325
4 | Terraced,Property type,0.4722
5 | Flats and maisonettes,Property type,0.6556
6 | Owner-occupied,Tenure,0.5577
7 | Private rent,Tenure,0.449
8 | Social rent,Tenure,0.7512
9 | 1929 and before,Property age,-0.08005
10 | 1930 to 1982,Property age,0.6168
11 | 1983 to 2011,Property age,0.9673
12 | 2012 and after,Property age,0.9969
13 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-grouped/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Grouped bar chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-sm-colour/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 | /*
6 | #graphic svg {
7 | border: 1px solid red;
8 | } */
--------------------------------------------------------------------------------
/bar-chart-horizontal-sm-colour/data.csv:
--------------------------------------------------------------------------------
1 | name,value,series
2 | Detached,20,Group 1
3 | Semi-detached,40,Group 1
4 | Terraced,60,Group 1
5 | "Flat, maisonette or apartment",80,Group 1
6 | Detached,20,Group 2
7 | Semi-detached,40,Group 2
8 | Terraced,60,Group 2
9 | "Flat, maisonette or apartment",80,Group 2
10 | Detached,20,Group 3
11 | Semi-detached,40,Group 3
12 | Terraced,60,Group 3
13 | "Flat, maisonette or apartment",80,Group 3
14 | Terraced,30,Group 4
15 | "Flat, maisonette or apartment",40,Group 4
16 | Detached,10,Group 4
17 | Semi-detached,20,Group 4
18 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-sm-colour/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Coloured small multiple bar chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-sm/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | .chart-container {
7 | display: inline-block;
8 | vertical-align: top;
9 | }
10 |
11 | .chart-container:last-child {
12 | margin-right: 0;
13 | }
14 |
15 |
16 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-sm/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": "#206095",
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary": "Here is the screen reader text describing the chart.",
7 | "dataLabels": {
8 | "show": 1,
9 | "numberFormat": ".0%"
10 | },
11 | "xDomain": "auto",
12 | // either "auto" or an array for the x domain e.g. [0,100]
13 | "xAxisLabel": "x axis label"
14 | },
15 | "optional": {
16 | "chart_every": {
17 | "sm": 1,
18 | "md": 1,
19 | "lg": 2
20 | },
21 | // "aspectRatio": {
22 | // "sm": [1, 2],
23 | // "md": [1, 2],
24 | // "lg": [1, 2]
25 | // },
26 | "margin": {
27 | "sm": {
28 | "top": 30,
29 | "right": 20,
30 | "bottom": 50,
31 | "left": 200
32 | },
33 | "md": {
34 | "top": 30,
35 | "right": 20,
36 | "bottom": 50,
37 | "left": 200
38 | },
39 | "lg": {
40 | "top": 30,
41 | "right": 20,
42 | "bottom": 50,
43 | "left": 200
44 | }
45 | },
46 | "chartGap": 10,
47 | "seriesHeight": {
48 | "sm": 30,
49 | "md": 30,
50 | "lg": 30
51 | },
52 | "xAxisTicks": {
53 | "sm": 2,
54 | "md": 2,
55 | "lg": 4
56 | },
57 | "mobileBreakpoint": 510,
58 | "mediumBreakpoint": 600,
59 | "dropYAxis": true
60 | },
61 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
62 | "chart_build": {}
63 | };
64 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-sm/data.csv:
--------------------------------------------------------------------------------
1 | name,value,series
2 | Other services,0.987848719,series1
3 | Manufacturing,0.983661406,series1
4 | Construction,0.681288045,series1
5 | Arts,0.481757214,series1
6 | Administrative,0.209665614,series1
7 | Wholesale trade,0.176396639,series1
8 | Administrative and supportive service activities,0.047910167,series1
9 | Arts,0.481757214,series2
10 | Administrative,0.209665614,series2
11 | Wholesale trade,0.176396639,series2
12 | Administrative and supportive service activities,0.047910167,series2
13 | Other services,-0.01987848719,series2
14 | Manufacturing,0.983661406,series2
15 | Construction,0.681288045,series2
--------------------------------------------------------------------------------
/bar-chart-horizontal-sm/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bar-chart-horizontal-sm/fallback.png
--------------------------------------------------------------------------------
/bar-chart-horizontal-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Horizontal Bar Chart, Small Multiple
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-clustered-grouped/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-clustered-grouped/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bar-chart-horizontal-stacked-clustered-grouped/fallback.png
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-clustered-grouped/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Grouped, clustered stacked horizontal bar chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-clustered/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-clustered/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bar-chart-horizontal-stacked-clustered/fallback.png
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-clustered/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Clustered stacked horizontal bar chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-grouped/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-grouped/data.csv:
--------------------------------------------------------------------------------
1 | name,group,Category 1,Category 2,Category 3
2 | Gypsy or Irish Traveller,White,0.19,0.128,0.02
3 | "English, Welsh, Scottish, Northern Irish or British",White,0.074,0.102,0.04
4 | Irish,White,0.075,0.094,0.06
5 | Roma,White,0.06,0.058,0.08
6 | Other White,White,0.044,0.063,0.1
7 | Bangladeshi,"Asian, Asian British or Asian Welsh",0.095,0.091,0.12
8 | Pakistani,"Asian, Asian British or Asian Welsh",0.084,0.076,0.14
9 | Indian,"Asian, Asian British or Asian Welsh",0.05,0.061,0.16
10 | Other Asian,"Asian, Asian British or Asian Welsh",0.052,0.067,0.18
11 | Chinese,"Asian, Asian British or Asian Welsh",0.028,0.053,0.2
12 | White and Black Caribbean,Mixed or Multiple ethnic groups,0.102,0.107,0.22
13 | Other Mixed or Multiple ethnic groups,Mixed or Multiple ethnic groups,0.079,0.099,0.24
14 | White and Black African,Mixed or Multiple ethnic groups,0.077,0.09,0.26
15 | White and Asian,Mixed or Multiple ethnic groups,0.065,0.095,0.28
16 | Caribbean,"Black, Black British, Black Welsh, Caribbean or African",0.082,0.09,0.3
17 | Other Black,"Black, Black British, Black Welsh, Caribbean or African",0.086,0.082,0.32
18 | African,"Black, Black British, Black Welsh, Caribbean or African",0.052,0.053,0.34
19 | Arab,Other ethnic group,0.087,0.083,0.36
20 | Any other ethnic group,Other ethnic group,0.068,0.073,0.38
21 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-grouped/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bar-chart-horizontal-stacked-grouped/fallback.png
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-grouped/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Grouped stacked horizontal bar chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-sm/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-sm/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bar-chart-horizontal-stacked-sm/fallback.png
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Stacked Horizontal Bar Chart, Small Multiple
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-with-tooltip/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | .tooltip-text {
7 | forced-color-adjust: none;
8 | }
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-with-tooltip/data.csv:
--------------------------------------------------------------------------------
1 | name,Category 1,Category 2,Category 3,Category 4 with a long name,Category 5
2 | Admin,20.85373832,17.6949027,84.86276061,31.5783842,48.20562268
3 | Arts,75.10385606,92.78801932,98.42939789,95.19411478,38.58584155
4 | Retail,64.12511024,36.80002708,38.20913822,4.832285581,31.60393462
5 | Manufacturing,58.04407128,91.82819229,44.15710484,93.53981204,32.06639495
6 | Construction,49.29571885,61.7405718,2.633201818,12.00880742,86.95296893
7 | Health and social work,26.42919394,68.3881695,38.34804204,45.46625342,24.65361361
8 | Transportation and storage,66.02170789,25.88544503,67.54775376,45.4008622,68.65015727
9 | Accommodation and food,24.56805884,89.47462279,49.36685439,50.05168647,65.708543
10 | Other,27.48215082,14.64375439,66.97898751,58.11839376,9.358939682
11 | All businesses,48.97683167,80.16796002,18.79872569,90.21841354,57.08565289
12 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked-with-tooltip/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Stacked horizontal bar chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked/data.csv:
--------------------------------------------------------------------------------
1 | name,Category 1,Category 2,Category 3,Category 4 with a long name,Category 5
2 | Admin,20.85373832,17.6949027,84.86276061,31.5783842,48.20562268
3 | Arts,75.10385606,92.78801932,98.42939789,95.19411478,38.58584155
4 | Retail,64.12511024,36.80002708,38.20913822,4.832285581,31.60393462
5 | Manufacturing,58.04407128,91.82819229,44.15710484,93.53981204,32.06639495
6 | Construction,49.29571885,61.7405718,2.633201818,12.00880742,86.95296893
7 | Health and social work,26.42919394,68.3881695,38.34804204,45.46625342,24.65361361
8 | Transportation and storage,66.02170789,25.88544503,67.54775376,45.4008622,68.65015727
9 | Accommodation and food,24.56805884,89.47462279,49.36685439,50.05168647,65.708543
10 | Other,27.48215082,14.64375439,66.97898751,58.11839376,9.358939682
11 | All businesses,48.97683167,80.16796002,18.79872569,90.21841354,57.08565289
12 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-stacked/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Stacked horizontal bar chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-dropdown/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-dropdown/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": "#27A0CC",
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary": "Here is the screenreader text describing the chart.",
7 | "dataLabels": {
8 | "show": true,
9 | "numberFormat": ".0%"
10 | },
11 | "xDomain": "auto",
12 | // either "auto" or an array for the x domain e.g. [0,100]
13 | "xAxisLabel": "x axis label",
14 | "defaultOption": "option1"
15 | },
16 | "optional": {
17 | "margin": {
18 | "sm": {
19 | "top": 15,
20 | "right": 20,
21 | "bottom": 50,
22 | "left": 120
23 | },
24 | "md": {
25 | "top": 15,
26 | "right": 20,
27 | "bottom": 50,
28 | "left": 120
29 | },
30 | "lg": {
31 | "top": 15,
32 | "right": 20,
33 | "bottom": 50,
34 | "left": 120
35 | }
36 | },
37 | "seriesHeight": {
38 | "sm": 30,
39 | "md": 30,
40 | "lg": 30
41 | },
42 | "xAxisTicks": {
43 | "sm": 4,
44 | "md": 8,
45 | "lg": 10
46 | },
47 | "mobileBreakpoint": 510,
48 | "mediumBreakpoint": 600
49 | },
50 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
51 | "chart_build": {}
52 | };
53 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-dropdown/data.csv:
--------------------------------------------------------------------------------
1 | name,value,option
2 | Other services,0.987848719,option1
3 | Manufacturing,0.283661406,option1
4 | Construction,0.681288045,option1
5 | Arts,0.481757214,option1
6 | Administrative,-0.209665614,option1
7 | Wholesale trade,0.176396639,option1
8 | Administrative and supportive service activities,0.047910167,option1
9 | Other services,0.787848719,option2
10 | Manufacturing,0.783661406,option2
11 | Construction,0.581288045,option2
12 | Arts,0.381757214,option2
13 | Administrative,-0.109665614,option2
14 | Wholesale trade,0.076396639,option2
15 | Administrative and supportive service activities,0.947910167,option2
16 | Other services,0.987848719,option3
17 | Manufacturing,0.983661406,option3
18 | Construction,0.681288045,option3
19 | Arts,0.481757214,option3
20 | Administrative,-0.209665614,option3
21 | Wholesale trade,0.176396639,option3
22 | Administrative and supportive service activities,-0.047910167,option3
23 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-dropdown/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bar-chart-horizontal-with-dropdown/fallback.png
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-dropdown/images/chosen-sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bar-chart-horizontal-with-dropdown/images/chosen-sprite.png
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-dropdown/images/chosen-sprite@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bar-chart-horizontal-with-dropdown/images/chosen-sprite@2x.png
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-dropdown/images/icons--chevron-down.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-dropdown/images/x_close.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-dropdown/images/x_close_slate.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-dropdown/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Horizontal Bar Chart with Dropdown Template
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-reference-line/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 |
7 |
8 |
9 | line.refline {
10 | stroke: #222;
11 | stroke-width: 3px;
12 | stroke-linecap: round;
13 | forced-color-adjust: auto;
14 | }
15 |
16 | div.legend--item--here {
17 | display:flex;
18 | padding-right:40px;
19 | padding-bottom: 12px;
20 | margin-top: 12px;
21 | }
22 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-reference-line/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": "#27A0CC",
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary": "Here is the screenreader text describing the chart.",
7 | "dataLabels": {
8 | "show": false,
9 | "numberFormat": ".0%"
10 | },
11 | "xAxisNumberFormat":".0%",
12 | "xDomain": "auto",
13 | // either "auto" or an array for the x domain e.g. [0,100]
14 | "xAxisLabel": "x axis label"
15 | },
16 | "optional": {
17 | "margin": {
18 | "sm": {
19 | "top": 15,
20 | "right": 20,
21 | "bottom": 50,
22 | "left": 120
23 | },
24 | "md": {
25 | "top": 15,
26 | "right": 20,
27 | "bottom": 50,
28 | "left": 120
29 | },
30 | "lg": {
31 | "top": 15,
32 | "right": 20,
33 | "bottom": 50,
34 | "left": 120
35 | }
36 | },
37 | "seriesHeight": {
38 | "sm": 30,
39 | "md": 30,
40 | "lg": 30
41 | },
42 | "xAxisTicks": {
43 | "sm": 4,
44 | "md": 8,
45 | "lg": 10
46 | },
47 | "mobileBreakpoint": 510,
48 | "mediumBreakpoint": 600
49 | },
50 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
51 | "chart_build": {}
52 | };
53 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-reference-line/data.csv:
--------------------------------------------------------------------------------
1 | name,value,ref
2 | Other services,0.987848719,0.1
3 | Manufacturing,0.983661406,0.2
4 | Construction,0.681288045,0.4
5 | Arts,0.481757214,0.8
6 | Administrative,-0.209665614,-0.17
7 | Wholesale trade,0.176396639,1.3
8 | Administrative and supportive service activities,0.047910167,0.5
9 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-reference-line/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Horizontal Bar Chart Template
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-reference-sm/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | .chart-container {
7 | display: inline-block;
8 | vertical-align: top;
9 | }
10 |
11 | .chart-container:last-child {
12 | margin-right: 0;
13 | }
14 |
15 |
16 |
17 | line.refline {
18 | stroke: #222;
19 | stroke-width: 3px;
20 | stroke-linecap: round;
21 | forced-color-adjust: auto;
22 | }
23 |
24 | div.legend--item--here {
25 | display:flex;
26 | padding-right:40px;
27 | padding-bottom: 12px;
28 | margin-top: 12px;
29 | }
30 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-reference-sm/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": "#27A0CC",
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary": "Here is the screen reader text describing the chart.",
7 | "dataLabels": {
8 | "show": false,
9 | "numberFormat": ".0%"
10 | },
11 | "xDomain": "auto",
12 | // either "auto" or an array for the x domain e.g. [0,100]
13 | "xAxisLabel": "x axis label"
14 | },
15 | "optional": {
16 | "chart_every": {
17 | "sm": 1,
18 | "md": 1,
19 | "lg": 2
20 | },
21 | // "aspectRatio": {
22 | // "sm": [1, 2],
23 | // "md": [1, 2],
24 | // "lg": [1, 2]
25 | // },
26 | "margin": {
27 | "sm": {
28 | "top": 30,
29 | "right": 20,
30 | "bottom": 50,
31 | "left": 200
32 | },
33 | "md": {
34 | "top": 30,
35 | "right": 20,
36 | "bottom": 50,
37 | "left": 200
38 | },
39 | "lg": {
40 | "top": 30,
41 | "right": 20,
42 | "bottom": 50,
43 | "left": 200
44 | }
45 | },
46 | "seriesHeight": {
47 | "sm": 30,
48 | "md": 30,
49 | "lg": 30
50 | },
51 | "xAxisTicks": {
52 | "sm": 2,
53 | "md": 2,
54 | "lg": 4
55 | },
56 | "mobileBreakpoint": 510,
57 | "mediumBreakpoint": 600,
58 | "dropYAxis": true
59 | },
60 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
61 | "chart_build": {}
62 | };
63 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-reference-sm/data.csv:
--------------------------------------------------------------------------------
1 | name,value,ref,series
2 | Other services,0.987848719,0.713166822,series1
3 | Manufacturing,0.983661406,0.482401697,series1
4 | Construction,0.681288045,0.495087081,series1
5 | Arts,0.481757214,0.310957379,series1
6 | Administrative,0.209665614,0.223459104,series1
7 | Wholesale trade,0.176396639,0.787709541,series1
8 | Administrative and supportive service activities,0.047910167,0.873262589,series1
9 | Other services,0.987848719,0.102020442,series2
10 | Manufacturing,0.983661406,0.497197175,series2
11 | Construction,0.681288045,0.450160625,series2
12 | Arts,0.481757214,0.546506975,series2
13 | Administrative,0.209665614,0.604779339,series2
14 | Wholesale trade,0.176396639,0.511551674,series2
15 | Administrative and supportive service activities,0.047910167,0.503160932,series2
16 | Other services,0.987848719,0.426386631,series3
17 | Manufacturing,0.983661406,0.656803629,series3
18 | Administrative,0.209665614,-0.138300364,series3
19 | Wholesale trade,-0.0176396639,0.545809768,series3
20 | Administrative and supportive service activities,0.047910167,0.127290739,series3
21 | Construction,0.681288045,0.488025492,series3
22 | Arts,0.481757214,0.029835392,series3
23 |
--------------------------------------------------------------------------------
/bar-chart-horizontal-with-reference-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Horizontal Bar Chart Template
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bar-chart-horizontal/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/bar-chart-horizontal/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": "#206095",
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary": "Here is the screenreader text describing the chart.",
7 | "dataLabels": {
8 | "show": true,
9 | "numberFormat": ".0%"
10 | },
11 | "xDomain": "auto",
12 | // either "auto" or an array for the x domain e.g. [0,100]
13 | "xAxisLabel": "x axis label"
14 | },
15 | "optional": {
16 | "margin": {
17 | "sm": {
18 | "top": 15,
19 | "right": 20,
20 | "bottom": 50,
21 | "left": 150
22 | },
23 | "md": {
24 | "top": 15,
25 | "right": 20,
26 | "bottom": 50,
27 | "left": 180
28 | },
29 | "lg": {
30 | "top": 15,
31 | "right": 20,
32 | "bottom": 50,
33 | "left": 200
34 | }
35 | },
36 | "seriesHeight": {
37 | "sm": 30,
38 | "md": 30,
39 | "lg": 30
40 | },
41 | "xAxisTicks": {
42 | "sm": 4,
43 | "md": 8,
44 | "lg": 10
45 | },
46 | "mobileBreakpoint": 510,
47 | "mediumBreakpoint": 600
48 | },
49 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
50 | "chart_build": {}
51 | };
52 |
--------------------------------------------------------------------------------
/bar-chart-horizontal/data.csv:
--------------------------------------------------------------------------------
1 | name,value
2 | Other services,0.987848719
3 | Manufacturing,0.983661406
4 | Construction,0.681288045
5 | Arts,-0.0481757214
6 | Administrative,0.209665614
7 | Wholesale trade,0.176396639
8 | Administrative and supportive service activities,0.047910167
9 |
--------------------------------------------------------------------------------
/bar-chart-horizontal/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bar-chart-horizontal/fallback.png
--------------------------------------------------------------------------------
/bar-chart-horizontal/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Horizontal Bar Chart Template
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bar-comet-dot-range-plot/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | .chart-container {
7 | display: inline-block;
8 | vertical-align: top;
9 | }
10 |
11 | .chart-container:last-child {
12 | margin-right: 0;
13 | }
14 |
15 |
16 |
17 | line.refline {
18 | stroke: #222;
19 | stroke-width: 3px;
20 | stroke-linecap: round;
21 | }
22 |
23 | div.legend--item--here {
24 | display:flex;
25 | padding-right:40px;
26 | padding-bottom: 12px;
27 | margin-top: 12px;
28 | }
29 |
--------------------------------------------------------------------------------
/bar-comet-dot-range-plot/data.csv:
--------------------------------------------------------------------------------
1 | name,value,ref,series
2 | Other services,0.7,0.8,series1
3 | Manufacturing,0.2,0.5,series1
4 | Construction,0.3,0.4,series1
5 | Arts,1,1,series1
6 | Administrative,0.7,0.8,series1
7 | Wholesale trade,0.5,0.7,series1
8 | Administrative and supportive service activities,0.3,0.2,series1
9 | Other services,0.6,0.9,series2
10 | Manufacturing,0.9,0.5,series2
11 | Construction,0.7,0.4,series2
12 | Arts,0.1,0.7,series2
13 | Administrative,0.4,0.8,series2
14 | Wholesale trade,1,0.7,series2
15 | Administrative and supportive service activities,0.3,0.7,series2
16 | Other services,0.9,0.8,series3
17 | Manufacturing,0.1,0.4,series3
18 | Administrative,0.2,0.3,series3
19 | Wholesale trade,0.8,0.7,series3
20 | Administrative and supportive service activities,0.2,0.6,series3
21 | Construction,0.4,0.1,series3
22 | Arts,0.7,0.2,series3
23 |
--------------------------------------------------------------------------------
/bar-comet-dot-range-plot/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Dot and range template
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/beeswarm/chart.css:
--------------------------------------------------------------------------------
1 |
2 | text {
3 | forced-color-adjust: auto;
4 | }
--------------------------------------------------------------------------------
/beeswarm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Beeswarm chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/bubble-chart-animated/css/chosen-sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/css/chosen-sprite.png
--------------------------------------------------------------------------------
/bubble-chart-animated/css/chosen-sprite@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/css/chosen-sprite@2x.png
--------------------------------------------------------------------------------
/bubble-chart-animated/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/bubble-chart-animated/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/bubble-chart-animated/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/bubble-chart-animated/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/bubble-chart-animated/images/chosen-sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/images/chosen-sprite.png
--------------------------------------------------------------------------------
/bubble-chart-animated/images/chosen-sprite@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/images/chosen-sprite@2x.png
--------------------------------------------------------------------------------
/bubble-chart-animated/images/fast-forward.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/images/fast-forward.png
--------------------------------------------------------------------------------
/bubble-chart-animated/images/fast-forward.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/bubble-chart-animated/images/icons--chevron-down.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/bubble-chart-animated/images/pause.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/images/pause.png
--------------------------------------------------------------------------------
/bubble-chart-animated/images/pause.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/bubble-chart-animated/images/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/images/play.png
--------------------------------------------------------------------------------
/bubble-chart-animated/images/play.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/bubble-chart-animated/images/rewind.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/bubble-chart-animated/images/rewind.png
--------------------------------------------------------------------------------
/bubble-chart-animated/images/rewind.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/bubble-chart-animated/images/x_close.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/bubble-chart-animated/images/x_close_slate.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/chart-menu/CB_images/area.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/area.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/bar_and_line.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/bar_and_line.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/bars_with_confidence.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/bars_with_confidence.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/group_hoz_bar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/group_hoz_bar.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/group_v_bar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/group_v_bar.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/group_v_bar_spread.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/group_v_bar_spread.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/grouped_hoz_bar_spread.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/grouped_hoz_bar_spread.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/simple_hoz_bar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/simple_hoz_bar.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/simple_hoz_bar_highlight.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/simple_hoz_bar_highlight.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/simple_line.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/simple_line.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/stacked_hoz_bar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/stacked_hoz_bar.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/stacked_hoz_bar_spread.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/stacked_hoz_bar_spread.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/stacked_v_bar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/stacked_v_bar.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/stacked_v_bar_hundred.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/stacked_v_bar_hundred.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/stacked_v_bar_hundred_colour.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/stacked_v_bar_hundred_colour.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/stacked_v_bar_snake.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/stacked_v_bar_snake.png
--------------------------------------------------------------------------------
/chart-menu/CB_images/stacked_v_bar_spread.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/chart-menu/CB_images/stacked_v_bar_spread.png
--------------------------------------------------------------------------------
/chart-menu/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": "#206095",
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary": "Here is the screenreader text describing the chart.",
7 | "xAxisTickFormat": {
8 | "sm": "%Y",
9 | "md": "%Y",
10 | "lg": "%b-%y"
11 | },
12 | "dateFormat": "%b-%y",
13 | //the format your date data has in data.csv
14 | "yDomain": "auto",
15 | // either "auto" or an array for the x domain e.g. [0,100]
16 | "yAxisLabel": "y axis label"
17 | },
18 | "optional": {
19 | "margin": {
20 | "sm": {
21 | "top": 15,
22 | "right": 20,
23 | "bottom": 50,
24 | "left": 70
25 | },
26 | "md": {
27 | "top": 15,
28 | "right": 20,
29 | "bottom": 50,
30 | "left": 70
31 | },
32 | "lg": {
33 | "top": 15,
34 | "right": 20,
35 | "bottom": 50,
36 | "left": 70
37 | }
38 | },
39 | "aspectRatio": {
40 | "sm": [1, 2],
41 | "md": [1, 1],
42 | "lg": [2, 1]
43 | },
44 | "xAxisTicksEvery": {
45 | "sm": 4,
46 | "md": 4,
47 | "lg": 2
48 | },
49 | "yAxisTicks": {
50 | "sm": 4,
51 | "md": 8,
52 | "lg": 10
53 | },
54 | "mobileBreakpoint": 510,
55 | "mediumBreakpoint": 600
56 | },
57 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
58 | "chart_build": {}
59 | };
60 |
--------------------------------------------------------------------------------
/chart-menu/data.csv:
--------------------------------------------------------------------------------
1 | chart,comparison,correlation,change-over-time,distribution,part-to-whole,geospatial,rank
2 | Area stacked small multiple,,,TRUE,,TRUE,,
3 | Bar chart Split,TRUE,,,,TRUE,,
4 | Bar chart small multiple,TRUE,,,,,,
5 | Bar chart horizontal with reference small multiple,TRUE,,,,,,
6 | Bar chart horizontal stacked small multiple,TRUE,,,,TRUE,,
7 | Bar chart horizontal stacked group,TRUE,,,,TRUE,,
8 | Bar chart horizontal grouped,TRUE,,,,,,
9 | Comet plot,,,TRUE,,,,TRUE
10 | Column small multiple,TRUE,,,,,,
11 | Colum chart stacked small multiple,TRUE,,,,TRUE,,
12 | Dotplot,,,TRUE,,,,
13 | Heatmap,,TRUE,,,,,
14 | Heatmap by column,,TRUE,,,,,
15 | Line chart small multiple,,,TRUE,,,,
16 | A line chart with area shaded,,,TRUE,,,,
17 | Population pyramid,,,,TRUE,,,
18 | Population pyramid with toggle,,,TRUE,TRUE,,,
19 | Population pyramid with a static comparison,,,,TRUE,,,
20 | Population pyramid with dropdown and interactive comparison,,,TRUE,TRUE,,,
21 | Range plot,,,TRUE,,,,
22 | Simple map,,,,,,TRUE,
23 | Other,,,,,,,
24 |
--------------------------------------------------------------------------------
/chart-menu/test.js:
--------------------------------------------------------------------------------
1 | function sumNumbers(numbers){
2 |
3 |
4 | }
--------------------------------------------------------------------------------
/column-chart-clustered/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | .chart-container {
7 | display: inline-block;
8 | vertical-align: top;
9 | }
10 |
11 | .chart-container:last-child {
12 | margin-right: 0;
13 | }
14 |
15 |
16 |
--------------------------------------------------------------------------------
/column-chart-clustered/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": ["#206095", "#27A0CC", "#871A5B", "#A8BD3A", "#F66068", "#003C57"],
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary": "The chart canvas is hidden from screen readers. The main message is summarised by the chart title and the data behind the chart is available to download below.",
7 | "dataLabels": {
8 | "show": true,
9 | "numberFormat": ".0%"
10 | },
11 | "xDomain": "auto",
12 | // either "auto" or an array for the x domain e.g. [0,100]
13 | "xAxisLabel": "",
14 | "chartHeight": {
15 | "sm": 300,
16 | "md": 300,
17 | "lg": 300
18 | },
19 | },
20 | "optional": {
21 | "chart_every": {
22 | "sm": 1,
23 | "md": 1,
24 | "lg": 1
25 | },
26 | // "aspectRatio": {
27 | // "sm": [1, 2],
28 | // "md": [1, 2],
29 | // "lg": [1, 2]
30 | // },
31 | "margin": {
32 | "sm": {
33 | "top": 30,
34 | "right": 20,
35 | "bottom": 50,
36 | "left": 50
37 | },
38 | "md": {
39 | "top": 30,
40 | "right": 20,
41 | "bottom": 50,
42 | "left": 50
43 | },
44 | "lg": {
45 | "top": 30,
46 | "right": 20,
47 | "bottom": 50,
48 | "left": 50
49 | }
50 | },
51 | "chartGap": 10,
52 | "xAxisTicks": {
53 | "sm": 2,
54 | "md": 2,
55 | "lg": 4
56 | },
57 | "mobileBreakpoint": 510,
58 | "mediumBreakpoint": 600,
59 | "dropYAxis": true
60 | },
61 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
62 | "chart_build": {}
63 | };
64 |
--------------------------------------------------------------------------------
/column-chart-clustered/data.csv:
--------------------------------------------------------------------------------
1 | name,series,category,value
2 | Administrative,series1,value,0.209665614
3 | Administrative,series1,ref,0.223459104
4 | Administrative,series2,value,0.209665614
5 | Administrative,series2,ref,0.604779339
6 | Administrative,series3,value,0.209665614
7 | Administrative,series3,ref,-0.138300364
8 | Arts,series1,value,0.481757214
9 | Arts,series1,ref,0.310957379
10 | Arts,series2,value,0.481757214
11 | Arts,series2,ref,0.546506975
12 | Arts,series3,value,0.481757214
13 | Arts,series3,ref,0.029835392
14 | Construction,series1,value,0.681288045
15 | Construction,series1,ref,0.495087081
16 | Construction,series2,value,0.681288045
17 | Construction,series2,ref,0.450160625
18 | Construction,series3,value,0.681288045
19 | Construction,series3,ref,0.488025492
20 | Manufacturing,series1,value,0.983661406
21 | Manufacturing,series1,ref,0.482401697
22 | Manufacturing,series2,value,0.983661406
23 | Manufacturing,series2,ref,0.497197175
24 | Manufacturing,series3,value,0.983661406
25 | Manufacturing,series3,ref,0.656803629
26 | Other services,series1,value,0.987848719
27 | Other services,series1,ref,0.713166822
28 | Other services,series2,value,0.987848719
29 | Other services,series2,ref,0.102020442
30 | Other services,series3,value,0.987848719
31 | Other services,series3,ref,0.426386631
32 | Wholesale trade,series1,value,0.176396639
33 | Wholesale trade,series1,ref,0.787709541
34 | Wholesale trade,series2,value,0.176396639
35 | Wholesale trade,series2,ref,0.511551674
36 | Wholesale trade,series3,value,-0.017639664
37 | Wholesale trade,series3,ref,0.545809768
38 |
--------------------------------------------------------------------------------
/column-chart-clustered/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Clustered Grouped Column Chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/column-chart-sm/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | .chart-container {
7 | display: inline-block;
8 | vertical-align: top;
9 | }
10 |
11 | .chart-container:last-child {
12 | margin-right: 0;
13 | }
14 |
15 |
--------------------------------------------------------------------------------
/column-chart-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Column Chart, Small Multiple
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/column-chart-stacked-sm/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | .chart-container {
7 | display: inline-block;
8 | vertical-align: top;
9 | }
10 |
11 | .chart-container:last-child {
12 | margin-right: 0;
13 | }
14 |
15 |
16 |
17 | #legend{
18 | display: grid;
19 | align-items: center;
20 | padding-bottom: 20px;
21 | }
--------------------------------------------------------------------------------
/column-chart-stacked-sm/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/column-chart-stacked-sm/fallback.png
--------------------------------------------------------------------------------
/column-chart-stacked-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Stacked Vertical Bar Chart Template
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/column-chart-stacked-with-line-sm/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | .chart-container {
7 | display: inline-block;
8 | vertical-align: top;
9 | }
10 |
11 | .chart-container:last-child {
12 | margin-right: 0;
13 | }
14 |
15 |
16 |
17 | #legend{
18 | display: grid;
19 | align-items: center;
20 | padding-bottom: 20px;
21 | }
22 |
23 | .dataLine {
24 | stroke-width: 3px;
25 | stroke-linecap: round;
26 | stroke-linejoin: round;
27 | fill: none;
28 | }
--------------------------------------------------------------------------------
/column-chart-stacked-with-line-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Stacked Vertical Bar Chart Template
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/column-chart-stacked-with-line/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels {
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | .dataLine {
7 | stroke-width: 3px;
8 | stroke-linecap: round;
9 | stroke-linejoin: round;
10 | fill: none;
11 |
12 | }
--------------------------------------------------------------------------------
/column-chart-stacked-with-line/data.csv:
--------------------------------------------------------------------------------
1 | date,value1,value2,value3,value4,value5
2 | Jan-20,0.089,0.008,0.033,0.054,-0.073
3 | Feb-20,0.064,-0.06,-0.083,0.084,-0.087
4 | Mar-20,0.007,-0.007,-0.088,0.009,0.011
5 | Apr-20,0.04,0.07,-0.08,0.046,0.089
6 | May-20,-0.04,0.093,0.012,0.018,0.018
7 | Jun-20,-0.003,0.007,-0.032,0.016,0.088
8 | Jul-20,0,0,-0.002,-0.034,-0.063
9 | Aug-20,0.074,-0.064,0.068,0.094,0.035
10 | Sep-20,-0.092,0.093,-0.039,-0.079,0.06
11 | Oct-20,-0.02,-0.029,-0.02,0.073,-0.061
12 | Nov-20,-0.099,-0.025,0.02,-0.004,-0.071
13 | Dec-20,0.055,0.024,-0.004,0.052,0.09
14 | Jan-21,0.088,0.083,-0.042,0.017,-0.061
15 | Feb-21,0.056,0.043,-0.086,-0.083,0.098
16 | Mar-21,0.041,0.057,-0.065,0.057,0.036
17 | Apr-21,0.033,-0.057,0.004,0.02,0.022
18 |
--------------------------------------------------------------------------------
/column-chart-stacked-with-line/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Column and Line Chart Template
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/column-chart-stacked/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | #legend{
7 | display: grid;
8 | align-items: center;
9 | padding-bottom: 20px;
10 | }
--------------------------------------------------------------------------------
/column-chart-stacked/data.csv:
--------------------------------------------------------------------------------
1 | date,Category 1,Category 2,Category 3,Category 4 with a long name,Category 5
2 | Jan-20,20.85373832,17.6949027,84.86276061,31.5783842,48.20562268
3 | Feb-20,75.10385606,92.78801932,98.42939789,95.19411478,38.58584155
4 | Mar-20,64.12511024,36.80002708,38.20913822,4.832285581,31.60393462
5 | Apr-20,58.04407128,91.82819229,44.15710484,93.53981204,32.06639495
6 | May-20,49.29571885,61.7405718,2.633201818,12.00880742,86.95296893
7 | Jun-20,26.42919394,68.3881695,38.34804204,45.46625342,24.65361361
8 | Jul-20,66.02170789,25.88544503,67.54775376,45.4008622,68.65015727
9 | Aug-20,24.56805884,89.47462279,49.36685439,50.05168647,65.708543
10 | Sep-20,27.48215082,14.64375439,66.97898751,58.11839376,9.358939682
11 | Oct-20,48.97683167,80.16796002,18.79872569,90.21841354,57.08565289
--------------------------------------------------------------------------------
/column-chart-stacked/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/column-chart-stacked/fallback.png
--------------------------------------------------------------------------------
/column-chart-stacked/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Stacked Column Chart Template From the Office for National Statistics
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/column-chart-with-ci-sm/chart.css:
--------------------------------------------------------------------------------
1 | .grid line {
2 | stroke: #ccc;
3 | stroke-opacity: 0.7;
4 | }
5 |
6 | .grid .tick {
7 | stroke: lightgrey;
8 | stroke-opacity: 0.7;
9 | shape-rendering: crispEdges;
10 | }
11 |
12 | .grid path {
13 | stroke-width: 0;
14 | }
15 |
16 | .chart-container {
17 | display: inline-block;
18 | vertical-align: top;
19 | }
20 |
21 | .chart-container:last-child {
22 | margin-right: 0;
23 | }
24 |
25 | .CI {
26 | forced-color-adjust: auto;
27 | }
28 |
29 | @media (forced-colors: active) {
30 | .CI {
31 | stroke-width: 3px;
32 | }
33 | }
--------------------------------------------------------------------------------
/column-chart-with-ci-sm/data.csv:
--------------------------------------------------------------------------------
1 | date,plot,group,yvalue,lowerCI,upperCI
2 | 30/04/2023,series1,group1,0.9,0.762140582,0.91544367
3 | 01/05/2023,series1,group1,0.986,0.953756323,1.113716766
4 | 02/05/2023,series1,group1,0.4,0.252092563,0.469616388
5 | 03/05/2023,series1,group1,0.2,0.07675212,0.269448362
6 | 04/05/2023,series1,group1,-0.16,-0.463193732,-0.0755478832
7 | 05/05/2023,series1,group1,0.4,0.394911927,0.522593444
8 | 06/05/2023,series1,group1,0.15,0.021105974,0.349661967
9 | 30/04/2023,series2,group1,0.9,0.806077985,1.036773339
10 | 01/05/2023,series2,group1,0.986,0.914420714,1.054011192
11 | 02/05/2023,series2,group1,0.4,0.229932036,0.459549418
12 | 03/05/2023,series2,group1,0.2,0.188541358,0.292497468
13 | 04/05/2023,series2,group1,0.6,0.479429245,0.659173911
14 | 05/05/2023,series2,group1,0.4,0.273715149,0.400069653
15 | 06/05/2023,series2,group1,0.15,0.005229229,0.156457096
--------------------------------------------------------------------------------
/column-chart-with-ci-sm/datanumeric.csv:
--------------------------------------------------------------------------------
1 | date,plot,group,yvalue,lowerCI,upperCI
2 | 1.00,series1,group1,0.9,0.762140582,0.91544367
3 | 2.00,series1,group1,0.986,0.953756323,1.113716766
4 | 3.00,series1,group1,0.4,0.252092563,0.469616388
5 | 4.00,series1,group1,0.2,0.07675212,0.269448362
6 | 5.00,series1,group1,0.6,0.463193732,0.755478832
7 | 6.00,series1,group1,0.4,0.394911927,0.522593444
8 | 7.00,series1,group1,0.15,0.021105974,0.349661967
9 | 1.00,series2,group1,0.9,0.806077985,1.036773339
10 | 2.00,series2,group1,0.986,0.914420714,1.054011192
11 | 3.00,series2,group1,0.4,0.229932036,0.459549418
12 | 4.00,series2,group1,0.2,0.188541358,0.292497468
13 | 5.00,series2,group1,0.6,0.479429245,0.659173911
14 | 6.00,series2,group1,0.4,0.273715149,0.400069653
15 | 7.00,series2,group1,0.15,0.005229229,0.156457096
16 |
--------------------------------------------------------------------------------
/column-chart-with-ci-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Column chart with confidence intervals, small multiple
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/column-chart/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/column-chart/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": "#206095",
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary": "Here is the screenreader text describing the chart.",
7 | "xAxisTickFormat": {
8 | "sm": "%Y",
9 | "md": "%Y",
10 | "lg": "%b-%y"
11 | },
12 | "yAxisTickFormat": ".0%",
13 | "xAxisNumberFormat": ".0f",
14 | "dateFormat": "%b-%y",
15 | //the format your date data has in data.csv
16 | "yDomain": "auto",
17 | // either "auto" or an array for the x domain e.g. [0,100]
18 | "yAxisLabel": "y axis label"
19 | },
20 | "optional": {
21 | "margin": {
22 | "sm": {
23 | "top": 25,
24 | "right": 20,
25 | "bottom": 50,
26 | "left": 70
27 | },
28 | "md": {
29 | "top": 25,
30 | "right": 20,
31 | "bottom": 50,
32 | "left": 70
33 | },
34 | "lg": {
35 | "top": 25,
36 | "right": 20,
37 | "bottom": 50,
38 | "left": 70
39 | }
40 | },
41 | "aspectRatio": {
42 | "sm": [1, 1],
43 | "md": [1, 1],
44 | "lg": [2, 1]
45 | },
46 | "xAxisTicksEvery": {
47 | "sm": 4,
48 | "md": 4,
49 | "lg": 2
50 | },
51 | "yAxisTicks": {
52 | "sm": 4,
53 | "md": 8,
54 | "lg": 10
55 | },
56 | "addFirstDate": false,
57 | "addFinalDate": false,
58 | "mobileBreakpoint": 510,
59 | "mediumBreakpoint": 600
60 | },
61 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
62 | "chart_build": {}
63 | };
64 |
--------------------------------------------------------------------------------
/column-chart/data.csv:
--------------------------------------------------------------------------------
1 | date,value
2 | Jan-20,0.987848719
3 | Feb-20,0.983661406
4 | Mar-20,0.681288045
5 | Apr-20,0.511422389
6 | May-20,0.979079334
7 | Jun-20,0.790509497
8 | Jul-20,0.458534842
9 | Aug-20,0.37607897
10 | Sep-20,0.184634081
11 | Oct-20,0.444556832
12 | Nov-20,0.172716557
13 | Dec-20,0.203252651
14 | Jan-21,0.241938997
15 | Feb-21,0.582086196
16 | Mar-21,0.732952731
17 | Apr-21,0.916589365
18 |
--------------------------------------------------------------------------------
/column-chart/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Column Chart Template
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/comet-clustered/data.csv:
--------------------------------------------------------------------------------
1 | name,group,series,min,max
2 | London,Group 2,Series 1,194.148,216.385
3 | South East,Group 2,Series 1,147.094,164.797
4 | East of England,Group 2,Series 1,86.537,96.476
5 | North West,Group 2,Series 1,86.303,95.218
6 | Scotland,Group 1,Series 1,74.186,86.779
7 | South West,Group 2,Series 1,71.495,79.367
8 | West Midlands,Group 2,Series 1,64.964,71.823
9 | Yorkshire and The Humber,Group 2,Series 1,62.346,69.249
10 | East Midlands,Group 2,Series 1,55.419,61.529
11 | Wales,Group 1,Series 1,32.439,36.082
12 | North East,Group 2,Series 1,26.19,30.042
13 | Northern Ireland,,Series 1,19.508,21.534
14 | London,Group 2,Series 2,194.495,217.687
15 | South East,Group 2,Series 2,147.456,166.101
16 | East of England,Group 2,Series 2,86.779,97.285
17 | North West,Group 2,Series 2,86.583,96.169
18 | South West,Group 2,Series 2,71.71,80.068
19 | Scotland,Group 1,Series 2,71.902,79.635
20 | West Midlands,Group 2,Series 2,65.199,72.708
21 | Yorkshire and The Humber,Group 2,Series 2,62.516,69.308
22 | East Midlands,Group 2,Series 2,55.604,62.11
23 | Wales,Group 1,Series 2,32.561,36.541
24 | North East,Group 2,Series 2,26.242,29.855
25 | Northern Ireland,,Series 2,19.582,21.814
26 |
--------------------------------------------------------------------------------
/comet-clustered/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | comet plot
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/comet-plot/chart.css:
--------------------------------------------------------------------------------
1 |
2 | .dataLabels{
3 | font-weight: 600;
4 | font-size: 14px;
5 | }
6 |
7 | .legendLabel{
8 | font-size: 14px;
9 | }
--------------------------------------------------------------------------------
/comet-plot/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "legendLabels": { "min": "2011", "max": "2021" },
5 | //the keys match the column names
6 | "colour_palette": ["#206095", "#F66068", "#A09FA0"],
7 | "sourceText": "Office for National Statistics",
8 | "accessibleSummary":
9 | "Here is the screenreader text describing the chart.",
10 | "numberFormat": ".0f",
11 | "xAxisNumberFormat": ".0f",
12 | "xAxisLabel": "x axis label",
13 | "xDomain": [0, 100],
14 | // either auto or a custom domain as an array e.g [0,100]
15 | "dotsize": 6,
16 | "legendItems": ["Inc","Dec","No"],
17 | //Choose which items to include in the legend, and the order that they appear
18 | "legendLineLength": 60,
19 | "legendItemWidth": 150,
20 | "showDataLabels": true
21 | },
22 | "optional": {
23 | "margin": {
24 | "sm": {
25 | "top": 5,
26 | "right": 20,
27 | "bottom": 20,
28 | "left": 100
29 | },
30 | "md": {
31 | "top": 5,
32 | "right": 20,
33 | "bottom": 20,
34 | "left": 100
35 | },
36 | "lg": {
37 | "top": 5,
38 | "right": 20,
39 | "bottom": 40,
40 | "left": 100
41 | }
42 | },
43 | "seriesHeight": {
44 | "sm": 40,
45 | "md": 40,
46 | "lg": 40
47 | },
48 | "xAxisTicks": {
49 | "sm": 4,
50 | "md": 8,
51 | "lg": 10
52 | },
53 | "legendHeight": {
54 | "sm": 40,
55 | "md": 40,
56 | "lg": 40
57 | },
58 | "mobileBreakpoint": 510,
59 | "mediumBreakpoint": 600
60 | },
61 | "elements": { "select": 0, "nav": 0, "legend": 1, "titles": 0 }
62 | };
63 |
--------------------------------------------------------------------------------
/comet-plot/data.csv:
--------------------------------------------------------------------------------
1 | name,group,min,max
2 | England,Group name 1,44.79967469,65.51485629
3 | Wales,Group name 1,19.5544272,86.4112192
4 | North East,Group name 2,21.04544788,55.54073662
5 | North West,Group name 2,39.13579896,51.13881403
6 | Yorkshire and The Humber,Group name 2,30.57469086,95.726681
7 | East Midlands,Group name 2,29.36591976,51.76293031
8 | West Midlands,Group name 2,39.86949419,80.18516748
9 | East,Group name 2,17.64884078,83.95086243
10 | London,Group name 2,43.91069538,57.87608769
11 | South West,Group name 2,64,64
12 | South East,Group name 2,8.973142806,61.1748033
13 | Another name,Group name 3,65.58717189,24.79415817
14 | And another,Group name 3,80.32467139,42.56371279
--------------------------------------------------------------------------------
/comet-plot/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | comet plot
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/dot-plot-with-ci-sm/chart.css:
--------------------------------------------------------------------------------
1 | .grid line {
2 | stroke: #ccc;
3 | stroke-opacity: 0.7;
4 | }
5 |
6 | .grid .tick {
7 | stroke: lightgrey;
8 | stroke-opacity: 0.7;
9 | shape-rendering: crispEdges;
10 | }
11 |
12 | .grid path {
13 | stroke-width: 0;
14 | }
15 |
16 |
17 |
18 | .chart-container {
19 | display: inline-block;
20 | vertical-align: top;
21 | }
--------------------------------------------------------------------------------
/dot-plot-with-ci-sm/datanumeric.csv:
--------------------------------------------------------------------------------
1 | date,series,group,yvalue,lowerCI,upperCI
2 | 1.00,series1,group1,0.9,0.762140582,0.91544367
3 | 2.00,series1,group1,0.986,0.953756323,1.113716766
4 | 3.00,series1,group1,0.4,0.252092563,0.469616388
5 | 4.00,series1,group1,0.2,0.07675212,0.269448362
6 | 5.00,series1,group1,0.6,0.463193732,0.755478832
7 | 6.00,series1,group1,0.4,0.394911927,0.522593444
8 | 7.00,series1,group1,0.15,0.021105974,0.349661967
9 | 1.00,series1,group2,0.2,0.195807801,0.384076313
10 | 2.00,series1,group2,0.6,0.496945796,0.67667971
11 | 3.00,series1,group2,0.2,0.112500197,0.346942267
12 | 4.00,series1,group2,0.4,0.333845371,0.503155176
13 | 5.00,series1,group2,0.8,0.673464525,0.876978637
14 | 6.00,series1,group2,0.5,0.328923663,0.588612633
15 | 7.00,series1,group2,0.25,0.184799135,0.267839835
16 | 1.00,series2,group1,0.9,0.806077985,1.036773339
17 | 2.00,series2,group1,0.986,0.914420714,1.054011192
18 | 3.00,series2,group1,0.4,0.229932036,0.459549418
19 | 4.00,series2,group1,0.2,0.188541358,0.292497468
20 | 5.00,series2,group1,0.6,0.479429245,0.659173911
21 | 6.00,series2,group1,0.4,0.273715149,0.400069653
22 | 7.00,series2,group1,0.15,0.005229229,0.156457096
23 | 1.00,series2,group2,0.2,0.051586064,0.352947862
24 | 2.00,series2,group2,0.6,0.447526175,0.70307366
25 | 3.00,series2,group2,0.2,0.135839648,0.245317339
26 | 4.00,series2,group2,0.4,0.316933746,0.402191087
27 | 5.00,series2,group2,0.8,0.623075007,0.928424395
28 | 6.00,series2,group2,0.5,0.316819495,0.598116676
29 | 7.00,series2,group2,0.25,0.053475873,0.288919209
30 |
--------------------------------------------------------------------------------
/dot-plot-with-ci-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Dot and Wisker Plot Small multiple
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/dot-plot/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/dot-plot/.DS_Store
--------------------------------------------------------------------------------
/dot-plot/chart.css:
--------------------------------------------------------------------------------
1 | line.between{
2 | stroke:#E5E6E7;
3 | stroke-width:3px;
4 | }
5 |
6 | div.legend--icon--diamond{
7 | height: 12px;
8 | width: 12px;
9 | align-self: center;
10 | flex-shrink: 0;
11 | forced-color-adjust: none;
12 | transform: rotate(45deg);
13 | }
--------------------------------------------------------------------------------
/dot-plot/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "legendLabels": ["2015-2019", "2020","Average","Another series"],
5 | "colour_palette": ["#A09FA0", "#206095","#871A5B","#A8BD3A"],
6 | "sourceText": "Office for National Statistics",
7 | "accessibleSummary":
8 | "Here is the screenreader text describing the chart.",
9 | "xAxisNumberFormat": ".0f",
10 | "xAxisLabel": "x axis label",
11 | "xDomain": "auto",
12 | "categoriesToMakeDiamonds": ["min",'average'],
13 | // either auto or a custom domain as an array e.g [0,100]
14 | },
15 | "optional": {
16 | "margin": {
17 | "sm": {
18 | "top": 15,
19 | "right": 20,
20 | "bottom": 30,
21 | "left": 100
22 | },
23 | "md": {
24 | "top": 15,
25 | "right": 20,
26 | "bottom": 30,
27 | "left": 100
28 | },
29 | "lg": {
30 | "top": 15,
31 | "right": 20,
32 | "bottom": 30,
33 | "left": 100
34 | }
35 | },
36 | "seriesHeight": {
37 | "sm": 40,
38 | "md": 40,
39 | "lg": 40
40 | },
41 | "xAxisTicks": {
42 | "sm": 4,
43 | "md": 8,
44 | "lg": 10
45 | },
46 | "mobileBreakpoint": 510,
47 | "mediumBreakpoint": 600
48 | },
49 | "elements": { "select": 0, "nav": 0, "legend": 1, "titles": 0 }
50 | };
51 |
--------------------------------------------------------------------------------
/dot-plot/data.csv:
--------------------------------------------------------------------------------
1 | name,min,max,average,First quartile
2 | Home,1.036438598,82.81832389,41.92738124,41
3 | Hospital,67.79034467,97.15070027,82.47052247,30
4 | Care home,51.44576587,20.33129332,35.8885296,95
5 | Other long title for wrapping,83.69747402,83.59107712,83.64427557,40
--------------------------------------------------------------------------------
/dot-plot/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Dot plot
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/doughnut/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels {
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
6 | /* .container {
7 | overflow: hidden;
8 | }
9 |
10 | .leftContainer {
11 | float: left;
12 | }
13 |
14 | .left1,
15 | .left2{
16 | display: inline-block;
17 | vertical-align: top;
18 | }
19 | .left2{
20 | word-wrap: break-word;
21 | }
22 | .right {
23 | float: right;
24 | }
25 | */
26 |
27 | .right {
28 | padding-right: 50px;
29 | }
30 |
31 | @media (max-width: 530px) {
32 | #legend {
33 | flex-flow: column;
34 | font-size: 14px;
35 | }
36 |
37 | .legend--item {
38 | padding-bottom: 8px;
39 | }
40 |
41 |
42 | .right {
43 | padding-right: 0px;
44 | }
45 | }
46 |
47 | .container {
48 | display: flex;
49 | }
50 |
51 | .leftContainer {
52 | display: flex;
53 | /* flex-grow: 1; */
54 | }
55 |
56 | .left1,
57 | .left2 {
58 | padding-right: 6px;
59 | font-weight: 600;
60 | }
61 |
62 | .right {
63 | margin-left: auto;
64 |
65 | }
66 |
67 | p {
68 | margin-block-start: 0;
69 | margin-block-end: 5px;
70 | /* flex: 1;
71 | white-space: normal; */
72 | }
73 |
74 | .legend--value--text {
75 | color: #707070;
76 | line-height: 14px;
77 | font-size: 14px;
78 | font-weight: 600;
79 | padding-right: 10px;
80 | margin: 0;
81 | }
--------------------------------------------------------------------------------
/doughnut/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": ["#206095", "#27A0CC", "#871A5B", "#A8BD3A", "#F66068", "#003C57"],
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary": "",
7 | "dataLabels": {
8 | "show": true,
9 | "numberFormat": ".1%"
10 | },
11 | "centreLabel": "Sikh identity"
12 | },
13 | "optional": {
14 | "chartHeight": {
15 | "sm": 400,
16 | "md": 400,
17 | "lg": 400
18 | },
19 | "margin": {
20 | "sm": {
21 | "top": 15,
22 | "right": 20,
23 | "bottom": 50,
24 | "left": 20
25 | },
26 | "md": {
27 | "top": 20,
28 | "right": 80,
29 | "bottom": 90,
30 | "left": 80
31 | },
32 | "lg": {
33 | "top": 20,
34 | "right": 60,
35 | "bottom": 70,
36 | "left": 60
37 | }
38 | },
39 | "mobileBreakpoint": 510,
40 | "mediumBreakpoint": 600
41 | },
42 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
43 | "chart_build": {}
44 | };
--------------------------------------------------------------------------------
/doughnut/data.csv:
--------------------------------------------------------------------------------
1 | category,value
2 | Religion only,0.810504497
3 | Ethnic group only ,0.003299295
4 | Both religion and ethnic group,0.186196208
5 |
--------------------------------------------------------------------------------
/doughnut/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Doughnut Chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/heatmap-per-column/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 16px;
4 | forced-color-adjust: revert;
5 | }
6 |
7 | svg.chart g.x g.tick text{
8 | font-weight: 700;
9 | fill:#414042;
10 | }
11 |
12 | g.y g.tick text{
13 | font-weight: 600;
14 | }
15 |
--------------------------------------------------------------------------------
/heatmap-per-column/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": "YlGnBu",
5 | // must be a colour brewer palette
6 | "sourceText": "Office for National Statistics",
7 | "accessibleSummary": "Here is the screenreader text describing the chart.",
8 | "dataLabelsNumberFormat": ".0f",
9 | "xAxisLabel": "x axis label",
10 | "numberOfBreaks": 5,
11 | "breaks": "jenks"
12 | // either "jenks","equal" or an array with custom breaks
13 | // if using custom breaks, it needs to be an object with keys the same as the columns and then an array of the value as the value of the key
14 | },
15 | "optional": {
16 | "margin": {
17 | "sm": {
18 | "top": 15,
19 | "right": 20,
20 | "bottom": 50,
21 | "left": 120
22 | },
23 | "md": {
24 | "top": 15,
25 | "right": 20,
26 | "bottom": 50,
27 | "left": 120
28 | },
29 | "lg": {
30 | "top": 15,
31 | "right": 20,
32 | "bottom": 50,
33 | "left": 120
34 | }
35 | },
36 | "seriesHeight": {
37 | "sm": 40,
38 | "md": 40,
39 | "lg": 40
40 | },
41 | "mobileBreakpoint": 510,
42 | "mediumBreakpoint": 600
43 | },
44 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 }
45 | };
46 |
--------------------------------------------------------------------------------
/heatmap-per-column/data.csv:
--------------------------------------------------------------------------------
1 | name,Ldn,SE,EE,SW,Sc,NW,WM,EM,Y&H
2 | Admin,20.85373832,6.68734369,91.8170006,31.5783842,48.20562268,92.09218949,80.66789858,50.56484924,31.1986153
3 | Arts,75.10385606,3.971293978,92.64287588,95.19411478,38.58584155,99.36743553,59.81457575,87.03107767,13.74814058
4 | Retail,64.12511024,3.684834977,94.44235097,4.832285581,31.60393462,49.45953284,67.95744598,21.37821922,78.39457609
5 | Manufacturing,58.04407128,3.831340656,98.73914808,93.53981204,32.06639495,84.91241512,60.32044686,3.489901745,82.20569463
6 | Construction,49.29571885,2.361259964,98.63071594,12.00880742,86.95296893,52.89787277,29.47984492,93.683539,57.04940039
7 | Health and social work,26.42919394,9.990174158,99.05070131,45.46625342,24.65361361,11.23520019,68.82058623,43.13596269,84.71592843
8 | Transportation and storage,66.02170789,5.30485909,95.36621072,45.4008622,68.65015727,12.04880862,73.06841193,8.464006935,13.69451549
9 | Accommodation and food,24.56805884,9.05074823,97.99504955,50.05168647,65.708543,29.6147122,29.46106092,31.7637962,45.00028678
10 | Other,27.48215082,3.439446902,91.30961441,58.11839376,9.358939682,73.9975048,74.84578974,54.81083207,19.75232875
11 | All businesses,48.97683167,6.159398858,90.44471927,90.21841354,57.08565289,6.333619886,58.75578025,64.53514981,39.21478802
--------------------------------------------------------------------------------
/heatmap-per-column/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Heatmap, by column
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/heatmap/chart.css:
--------------------------------------------------------------------------------
1 | svg{
2 | font-family:"Open Sans"
3 | }
4 |
5 | .dataLabels{
6 | font-weight: 600;
7 | font-size: 16px;
8 | forced-color-adjust: revert;
9 | }
10 |
11 | svg.chart g.x g.tick text{
12 | font-weight: 700;
13 | fill:#414042;
14 | }
15 |
16 | g.y g.tick text{
17 | font-weight: 600;
18 | }
19 |
20 | #key .tick text{
21 | font-size: 14px;
22 | }
23 |
24 | #key path.domain{
25 | display:none;
26 | }
27 |
28 | #keysymbol path{
29 | transform: rotate(180deg) ;
30 | }
31 |
--------------------------------------------------------------------------------
/heatmap/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": "YlGnBu",
5 | // colour brewer palette or custom array of colours
6 | "sourceText": "Office for National Statistics",
7 | "accessibleSummary": "Here is the screenreader text describing the chart.",
8 | "dataLabelsNumberFormat": ".0f",
9 | "xAxisLabel": "x axis label",
10 | "numberOfBreaks": 5,
11 | "breaks": "jenks",
12 | // either "jenks","equal" or an array with custom breaks
13 | "cascadeX": true,
14 | //turns on or off cascading xaxis label
15 | "legendFormat": ".0f"
16 | },
17 | "optional": {
18 | "margin": {
19 | "sm": {
20 | "top": 180,
21 | "right": 20,
22 | "bottom": 50,
23 | "left": 120
24 | },
25 | "md": {
26 | "top": 180,
27 | "right": 20,
28 | "bottom": 50,
29 | "left": 120
30 | },
31 | "lg": {
32 | "top": 180,
33 | "right": 20,
34 | "bottom": 50,
35 | "left": 120
36 | }
37 | },
38 | "seriesHeight": {
39 | "sm": 40,
40 | "md": 40,
41 | "lg": 40
42 | },
43 | "mobileBreakpoint": 510,
44 | "mediumBreakpoint": 600
45 | },
46 | "elements": { "select": 0, "nav": 0, "legend": 1, "titles": 0 }
47 | };
48 |
--------------------------------------------------------------------------------
/heatmap/data.csv:
--------------------------------------------------------------------------------
1 | name,London,South East,East of England,South West,Scotland,North West,West Midlands,East Midlands,Yorkshire and The Humber
2 | Admin,20.85373832,17.6949027,84.86276061,31.5783842,48.20562268,92.09218949,80.66789858,50.56484924,31.1986153
3 | Arts,75.10385606,92.78801932,98.42939789,95.19411478,38.58584155,99.36743553,59.81457575,87.03107767,13.74814058
4 | Retail,64.12511024,36.80002708,38.20913822,4.832285581,31.60393462,49.45953284,67.95744598,21.37821922,78.39457609
5 | Manufacturing,58.04407128,91.82819229,44.15710484,93.53981204,32.06639495,84.91241512,60.32044686,3.489901745,82.20569463
6 | Construction,49.29571885,61.7405718,2.633201818,12.00880742,86.95296893,52.89787277,29.47984492,93.683539,57.04940039
7 | Health and social work,26.42919394,68.3881695,38.34804204,45.46625342,24.65361361,11.23520019,68.82058623,43.13596269,84.71592843
8 | Transportation and storage,66.02170789,25.88544503,67.54775376,45.4008622,68.65015727,12.04880862,73.06841193,8.464006935,13.69451549
9 | Accommodation and food,24.56805884,89.47462279,49.36685439,50.05168647,65.708543,29.6147122,29.46106092,31.7637962,45.00028678
10 | Other,27.48215082,14.64375439,66.97898751,58.11839376,9.358939682,73.9975048,74.84578974,54.81083207,19.75232875
11 | All businesses,48.97683167,80.16796002,18.79872569,90.21841354,57.08565289,6.333619886,58.75578025,64.53514981,39.21478802
12 |
--------------------------------------------------------------------------------
/heatmap/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Heatmap
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/line-chart-sm-colours/chart.css:
--------------------------------------------------------------------------------
1 | .grid line {
2 | stroke: #ccc;
3 | stroke-opacity: 0.7;
4 | }
5 |
6 | /* Need to discuss this with the team */
7 | .axis path,
8 | .axis line {
9 | stroke: none;
10 | /* Changes the color of the axis lines */
11 | }
12 |
13 | .grid .tick {
14 | stroke: lightgrey;
15 | /* Changes the color of the gridlines */
16 | stroke-opacity: 0.7;
17 | shape-rendering: crispEdges;
18 | /* Makes the gridlines appear more crisp */
19 | }
20 |
21 | .grid path {
22 | stroke-width: 0;
23 | /* Removes the line along the y-axis */
24 | }
25 |
26 | .chart-container {
27 | display: inline-block;
28 | vertical-align: top;
29 | }
30 |
31 | .chart-container:last-child {
32 | margin-right: 0;
33 | }
34 |
35 | .dataLabel {
36 | font-weight: 600;
37 | font-size: 14px;
38 | }
39 |
40 | #legend {
41 | margin-top: 10px;
42 | margin-bottom: 10px;
43 | }
--------------------------------------------------------------------------------
/line-chart-sm-colours/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Line chart
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/line-chart-sm/chart.css:
--------------------------------------------------------------------------------
1 | .grid line {
2 | stroke: #ccc;
3 | stroke-opacity: 0.7;
4 | }
5 |
6 | /* Need to discuss this with the team */
7 | .axis path,
8 | .axis line {
9 | stroke: none;
10 | /* Changes the color of the axis lines */
11 | }
12 |
13 | .grid .tick {
14 | stroke: lightgrey;
15 | /* Changes the color of the gridlines */
16 | stroke-opacity: 0.7;
17 | shape-rendering: crispEdges;
18 | /* Makes the gridlines appear more crisp */
19 | }
20 |
21 | .grid path {
22 | stroke-width: 0;
23 | /* Removes the line along the y-axis */
24 | }
25 |
26 | .chart-container {
27 | display: inline-block;
28 | vertical-align: top;
29 | }
30 |
31 | .chart-container:last-child {
32 | margin-right: 0;
33 | }
34 |
35 | .dataLabel {
36 | font-weight: 600;
37 | font-size: 14px;
38 | }
39 |
40 | @media (forced-colors: active) {
41 | .other {
42 | stroke: grey
43 | }
44 | }
--------------------------------------------------------------------------------
/line-chart-sm/data.csv:
--------------------------------------------------------------------------------
1 | date,category one,category two,category three,category four two lines,category five,category six,category seven,category eight,England
2 | 01/01/2020,20000,15000,1350,25000,23000,2147.647674,803.4236518,8761.200865,20186.82495
3 | 02/02/2020,18000,25000,12000,19000,12000,15107.03413,6265.399707,6219.250923,8958.465726
4 | 03/03/2020,16070,16000,19000,16000,4000,1578.114468,1387.812878,1305.516917,479.0131944
5 | 04/04/2020,12000,9000,9000,12000,1000,5493.805776,4584.536935,9831.943688,285.2240553
6 | 05/05/2020,,7000,11000,8000,18000,5151.210511,2178.066478,2627.321883,16723.99743
7 | 06/06/2020,,4000,12000,5000,9000,3760.459879,7483.754553,3364.22916,8803.264019
8 | 07/07/2020,,16500,13000,4000,7000,3573.186076,8570.58649,1381.490126,2205.526834
9 | 08/08/2020,,15000,12000,3000,10000,8543.773412,6015.670275,2046.407088,891.9963241
10 | 09/09/2020,29000,19000,11000,1000,11000,14594.12132,6302.600221,769.5904996,4146.356126
11 | 10/10/2020,15000,21000,10000,6000,9000,9625.136914,5080.766341,4507.307144,3299.148339
12 | 11/11/2020,12000,24000,7000,19000,21000,9098.24159,464.6884476,5187.1558,10150.04736
13 | 12/12/2020,4000,28000,13000,18000,23000,16333.7828,187.247021,14119.25473,16971.117
--------------------------------------------------------------------------------
/line-chart-sm/datanumeric.csv:
--------------------------------------------------------------------------------
1 | date,category one,category two,category three,category four two lines,category five,category six,category seven,category eight,England
2 | 1,20000,15000,1350,25000,23000,2147.647674,803.4236518,8761.200865,20186.82495
3 | 2,18000,25000,12000,19000,12000,15107.03413,6265.399707,6219.250923,8958.465726
4 | 3,16070,16000,19000,16000,4000,1578.114468,1387.812878,1305.516917,479.0131944
5 | 4,12000,9000,9000,12000,1000,5493.805776,4584.536935,9831.943688,285.2240553
6 | 5,13050,7000,11000,8000,18000,5151.210511,2178.066478,2627.321883,16723.99743
7 | 6,22000,4000,12000,5000,9000,3760.459879,7483.754553,3364.22916,8803.264019
8 | 7,25000,16500,13000,4000,7000,3573.186076,8570.58649,1381.490126,2205.526834
9 | 8,27000,15000,12000,3000,10000,8543.773412,6015.670275,2046.407088,891.9963241
10 | 9,29000,19000,11000,1000,11000,14594.12132,6302.600221,769.5904996,4146.356126
11 | 10,15000,21000,10000,6000,9000,9625.136914,5080.766341,4507.307144,3299.148339
12 | 11,12000,24000,7000,19000,21000,9098.24159,464.6884476,5187.1558,10150.04736
13 | 12,4000,28000,13000,18000,23000,16333.7828,187.247021,14119.25473,16971.117
14 |
--------------------------------------------------------------------------------
/line-chart-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Small Multiple Line chart
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/line-chart-with-area/chart.css:
--------------------------------------------------------------------------------
1 | .grid line {
2 | stroke: #ccc;
3 | stroke-opacity: 0.7;
4 | }
5 |
6 | /* Need to discuss this with the team */
7 | .axis path,
8 | .axis line {
9 | stroke: none; /* Changes the color of the axis lines */
10 | }
11 |
12 | .grid .tick {
13 | stroke: lightgrey; /* Changes the color of the gridlines */
14 | stroke-opacity: 0.7;
15 | shape-rendering: crispEdges; /* Makes the gridlines appear more crisp */
16 | }
17 | .grid path {
18 | stroke-width: 0; /* Removes the line along the y-axis */
19 | }
20 |
21 | .legend--icon--square {
22 | height: 12px;
23 | width: 12px;
24 | background-color: #c6c6c6;
25 | /* border-radius: 50%; */
26 | align-self: center;
27 | flex-shrink: 0;
28 | forced-color-adjust: none;
29 | }
30 |
31 | @media (forced-colors: active) {
32 | .shaded {
33 | opacity: 0.5
34 | }
35 | }
--------------------------------------------------------------------------------
/line-chart-with-area/datanumeric.csv:
--------------------------------------------------------------------------------
1 | date,metric1,metric1_lowerCI,metric1_upperCI,metric2,metric2_lowerCI,metric2_upperCI,metric3 with a long label,metric3 with a long label_lowerCI,metric3 with a long label_upperCI
2 | 1,2.35,1.96,2.77,2.62,2.38,2.89,2.86,2.55,3.2
3 | 2,2.3,1.92,2.74,2.6,2.34,2.87,2.79,2.48,3.13
4 | 3,2.26,1.87,2.69,2.58,2.33,2.85,2.73,2.43,3.07
5 | 4,2.23,1.84,2.64,2.57,2.32,2.83,2.68,2.38,3.01
6 | 5,2.2,1.82,2.6,2.57,2.33,2.82,2.65,2.36,2.96
7 | 6,2.18,1.82,2.57,2.58,2.35,2.82,2.63,2.35,2.93
8 | 7,2.17,1.82,2.55,2.6,2.38,2.83,2.63,2.35,2.91
9 | 8,2.17,1.82,2.55,2.63,2.41,2.87,2.64,2.37,2.91
10 | 9,2.19,1.84,2.57,2.68,2.45,2.92,2.66,2.39,2.94
11 | 10,2.22,1.87,2.6,2.74,2.49,2.99,2.71,2.43,2.99
12 | 11,2.28,1.91,2.68,2.82,2.56,3.08,2.77,2.47,3.07
13 | 12,2.35,1.96,2.76,2.91,2.64,3.19,2.84,2.53,3.16
14 | 13,2.44,2.04,2.88,3.02,2.74,3.3,2.94,2.62,3.26
15 | 14,2.56,2.14,3,3.15,2.85,3.44,3.04,2.72,3.38
16 | 15,2.69,2.27,3.14,3.29,3,3.59,3.17,2.83,3.51
17 | 16,2.85,2.42,3.3,3.46,3.17,3.75,3.31,2.98,3.65
18 | 17,3.03,2.58,3.49,3.64,3.35,3.93,3.47,3.15,3.8
19 | 18,3.23,2.76,3.7,3.84,3.55,4.13,3.64,3.33,3.98
20 | 19,3.45,2.98,3.93,4.05,3.76,4.35,3.83,3.51,4.17
21 | 20,3.68,3.18,4.18,4.27,3.97,4.59,4.03,3.7,4.38
22 | 21,3.91,3.39,4.45,4.51,4.19,4.84,4.25,3.89,4.62
23 | 22,4.15,3.61,4.73,4.76,4.41,5.11,4.47,4.1,4.87
24 | 23,4.38,3.83,4.98,5.01,4.65,5.38,4.7,4.3,5.11
25 | 24,4.6,4.02,5.22,5.26,4.89,5.64,4.93,4.53,5.36
26 | 25,4.8,4.22,5.43,5.51,5.13,5.9,5.17,4.74,5.61
27 | 26,4.99,4.4,5.6,5.75,5.37,6.13,5.4,4.97,5.86
28 | 27,5.15,4.57,5.77,5.99,5.62,6.35,5.64,5.21,6.09
29 | 28,5.3,4.71,5.93,6.21,5.84,6.58,5.87,5.44,6.32
30 |
--------------------------------------------------------------------------------
/line-chart-with-area/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Line chart with area
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/line-chart-with-ci-sm/chart.css:
--------------------------------------------------------------------------------
1 | .grid line {
2 | stroke: #ccc;
3 | stroke-opacity: 0.7;
4 | }
5 |
6 | /* Need to discuss this with the team */
7 | .axis path,
8 | .axis line {
9 | stroke: none;
10 | /* Changes the color of the axis lines */
11 | }
12 |
13 | .grid .tick {
14 | stroke: lightgrey;
15 | /* Changes the color of the gridlines */
16 | stroke-opacity: 0.7;
17 | shape-rendering: crispEdges;
18 | /* Makes the gridlines appear more crisp */
19 | }
20 |
21 | .grid path {
22 | stroke-width: 0;
23 | /* Removes the line along the y-axis */
24 | }
25 |
26 | .chart-container {
27 | display: inline-block;
28 | vertical-align: top;
29 | }
30 |
31 | .chart-container:last-child {
32 | margin-right: 0;
33 | }
34 |
35 | .dataLabel {
36 | font-weight: 600;
37 | font-size: 14px;
38 | }
39 |
40 | #legend {
41 | margin-top: 10px;
42 | margin-bottom: 10px;
43 | }
44 |
45 |
46 | .legend--icon--rect {
47 | height: 12px;
48 | width: 12px;
49 | align-self: center;
50 | flex-shrink: 0;
51 | forced-color-adjust: none;
52 | }
53 |
54 | .legend--itemCI {
55 | display: flex;
56 | padding-right: 40px;
57 | padding-bottom: 12px;
58 | }
59 |
60 | @media (forced-colors: active) {
61 | .shaded {
62 | opacity: 0.5
63 | }
64 | }
--------------------------------------------------------------------------------
/line-chart-with-ci-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Line chart
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/line-chart/chart.css:
--------------------------------------------------------------------------------
1 | .grid line {
2 | stroke: #ccc;
3 | stroke-opacity: 0.7;
4 | }
5 |
6 | /* Need to discuss this with the team */
7 | .axis path,
8 | .axis line {
9 | stroke: none; /* Changes the color of the axis lines */
10 | }
11 |
12 | .grid .tick {
13 | stroke: lightgrey; /* Changes the color of the gridlines */
14 | stroke-opacity: 0.7;
15 | shape-rendering: crispEdges; /* Makes the gridlines appear more crisp */
16 | }
17 | .grid path {
18 | stroke-width: 0; /* Removes the line along the y-axis */
19 | }
20 |
--------------------------------------------------------------------------------
/line-chart/data.csv:
--------------------------------------------------------------------------------
1 | date,category one,category two,category three,category four two lines,category five
2 | 01/03/2020,20000,,1350,25000,23000
3 | 02/03/2021,18000,0,12000,19000,12000
4 | 03/03/2022,16070,0,19000,16000,4000
5 | 04/03/2023,12000,9000,9000,12000,1000
6 | 05/03/2024,13050,,11000,8000,18000
7 | 06/03/2025,22000,4000,12000,5000,9000
8 | 07/03/2026,25000,16500,13000,4000,7000
9 | 08/03/2027,27000,15000,12000,3000,10000
10 | 09/03/2028,29000,19000,11000,1000,11000
11 | 10/03/2029,15000,21000,10000,6000,9000
12 | 11/03/2030,12000,24000,7000,19000,21000
13 | 12/03/2031,4000,28000,13000,18000,23000
14 |
--------------------------------------------------------------------------------
/line-chart/datanumeric.csv:
--------------------------------------------------------------------------------
1 | date,category one,category two,category three,category four two lines,category five
2 | 1,20000,15000,1350,25000,23000
3 | 2,18000,25000,12000,19000,12000
4 | 3,16070,16000,19000,16000,4000
5 | 4,12000,9000,9000,12000,1000
6 | 5,13050,7000,11000,8000,18000
7 | 6,22000,4000,12000,5000,9000
8 | 7,25000,16500,13000,4000,7000
9 | 8,27000,15000,12000,3000,10000
10 | 9,29000,19000,11000,1000,11000
11 | 10,15000,21000,10000,6000,9000
12 | 11,12000,24000,7000,19000,21000
13 | 12,4000,28000,13000,18000,23000
14 |
--------------------------------------------------------------------------------
/line-chart/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Line chart
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/population-pyramid-static-with-comparison/chart.css:
--------------------------------------------------------------------------------
1 | div.chartLabel > p{
2 | font-size: 16px;
3 | font-weight: 600;
4 | margin-bottom:10px;
5 | }
6 |
7 | div#titles{
8 | display: flex;
9 | flex-wrap: nowrap;
10 | flex-direction: column;
11 | }
12 |
13 | .flex-row{
14 | display: flex;
15 | flex-direction: row;
16 | }
17 |
18 | div.legend--item div:last-child{
19 | flex-shrink: 1;
20 | }
21 |
22 | .legend--icon--circle{
23 | margin-right: 8px;
24 | }
25 |
--------------------------------------------------------------------------------
/population-pyramid-static-with-comparison/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "accessibleSummary":
4 | "This chart has been hidden from screen readers. The main message of the chart is summarised in the chart title.",
5 | "sourceText": "Office for National Statistics",
6 | "graphic_data_url": "data.csv",
7 | "comparison_data": "comparison.csv",
8 | "dataType": "numbers",
9 | // dataType can be a 'percentage' or 'numbers' where it works out the percentage in the script
10 | "colour_palette": ["#9A86E9", "#3fb0b3"],
11 | // this is the lighter palette for reference lines ["#9A86E9", "#3fb0b3"]
12 | "comparison_colour_palette": ["#5c5185", "#306970"],
13 | "legend": ["Area name", "England and Wales"],
14 | "xAxisNumberFormat": ".1%",
15 | "yAxisTicksEvery": 10,
16 | "xAxisLabel": "Percentage",
17 | "yAxisLabel": "Age"
18 | },
19 | "optional": {
20 | "margin": {
21 | "sm": {
22 | "top": 30,
23 | "right": 10,
24 | "bottom": 50,
25 | "left": 10
26 | },
27 | "md": {
28 | "top": 30,
29 | "right": 10,
30 | "bottom": 50,
31 | "left": 10
32 | },
33 | "lg": {
34 | "top": 30,
35 | "right": 10,
36 | "bottom": 50,
37 | "left": 10
38 | },
39 | "centre": 60
40 | },
41 | "seriesHeight": {
42 | "sm": 6,
43 | "md": 6,
44 | "lg": 6
45 | },
46 | "xAxisTicks": {
47 | "sm": 3,
48 | "md": 3,
49 | "lg": 3
50 | },
51 | "mobileBreakpoint": 510,
52 | "mediumBreakpoint": 600
53 | },
54 | "elements": { "select": 0, "nav": 0, "legend": 1, "titles": 1 }
55 | };
56 |
--------------------------------------------------------------------------------
/population-pyramid-static-with-comparison/data.csv:
--------------------------------------------------------------------------------
1 | age,femaleBar,maleBar
2 | <1,449,469
3 | 1,458,496
4 | 2,510,536
5 | 3,476,510
6 | 4,518,559
7 | 5,551,558
8 | 6,505,527
9 | 7,528,569
10 | 8,561,611
11 | 9,592,580
12 | 10,564,604
13 | 11,596,642
14 | 12,579,609
15 | 13,568,622
16 | 14,563,574
17 | 15,571,597
18 | 16,554,537
19 | 17,542,543
20 | 18,425,502
21 | 19,431,478
22 | 20,495,487
23 | 21,514,500
24 | 22,563,502
25 | 23,535,464
26 | 24,515,537
27 | 25,554,510
28 | 26,548,529
29 | 27,601,513
30 | 28,579,527
31 | 29,606,529
32 | 30,629,566
33 | 31,617,512
34 | 32,612,565
35 | 33,646,539
36 | 34,647,553
37 | 35,574,532
38 | 36,600,539
39 | 37,560,520
40 | 38,565,492
41 | 39,583,498
42 | 40,555,516
43 | 41,581,529
44 | 42,499,500
45 | 43,501,447
46 | 44,502,435
47 | 45,501,519
48 | 46,492,452
49 | 47,560,498
50 | 48,546,595
51 | 49,633,622
52 | 50,680,629
53 | 51,664,589
54 | 52,698,610
55 | 53,705,646
56 | 54,709,648
57 | 55,759,677
58 | 56,719,731
59 | 57,753,680
60 | 58,730,681
61 | 59,740,662
62 | 60,691,693
63 | 61,633,633
64 | 62,650,627
65 | 63,590,596
66 | 64,575,609
67 | 65,572,548
68 | 66,542,511
69 | 67,489,521
70 | 68,561,482
71 | 69,507,513
72 | 70,491,466
73 | 71,534,496
74 | 72,545,472
75 | 73,543,524
76 | 74,523,491
77 | 75,371,391
78 | 76,372,347
79 | 77,341,275
80 | 78,345,221
81 | 79,322,236
82 | 80,274,229
83 | 81,302,213
84 | 82,281,215
85 | 83,310,199
86 | 84,273,168
87 | 85,209,169
88 | 86,219,122
89 | 87,166,122
90 | 88,168,101
91 | 89,135,81
92 | 90+,511,217
--------------------------------------------------------------------------------
/population-pyramid-static-with-comparison/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Population pyramid with comparison, static
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/population-pyramid-static/chart.css:
--------------------------------------------------------------------------------
1 | div.chartLabel>p {
2 | font-size: 16px;
3 | font-weight: 600;
4 | margin-bottom: 10px;
5 | }
6 |
7 | div#titles {
8 | display: flex;
9 | flex-wrap: nowrap;
10 | flex-direction: column;
11 | }
12 |
13 | .flex-row {
14 | display: flex;
15 | flex-direction: row;
16 | }
17 |
18 |
--------------------------------------------------------------------------------
/population-pyramid-static/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "accessibleSummary":
4 | "This chart has been hidden from screen readers. The main message of the chart is summarised in the chart title.",
5 | "sourceText": "Office for National Statistics",
6 | "graphic_data_url": "data.csv",
7 | "dataType": "numbers",
8 | // dataType can be a 'percentage' or 'numbers' where it works out the percentage in the script
9 | "colour_palette": ["#6749A6", "#2EA1A4"],
10 | // this is the darker palette when there are no comparison lines ["#6749A6","#2EA1A4"]
11 | "legend": ["Variable name"],
12 | "xAxisNumberFormat": ".1%",
13 | "yAxisTicksEvery": 10,
14 | "xAxisLabel": "Percentage",
15 | "yAxisLabel": "Age"
16 | },
17 | "optional": {
18 | "margin": {
19 | "sm": {
20 | "top": 30,
21 | "right": 10,
22 | "bottom": 50,
23 | "left": 10
24 | },
25 | "md": {
26 | "top": 30,
27 | "right": 10,
28 | "bottom": 50,
29 | "left": 10
30 | },
31 | "lg": {
32 | "top": 30,
33 | "right": 10,
34 | "bottom": 50,
35 | "left": 10
36 | },
37 | "centre": 60
38 | },
39 | "seriesHeight": {
40 | "sm": 6,
41 | "md": 6,
42 | "lg": 6
43 | },
44 | "xAxisTicks": {
45 | "sm": 3,
46 | "md": 3,
47 | "lg": 3
48 | },
49 | "mobileBreakpoint": 510,
50 | "mediumBreakpoint": 600
51 | },
52 | "elements": { "select": 0, "nav": 0, "legend": 1, "titles": 1 }
53 | };
54 |
--------------------------------------------------------------------------------
/population-pyramid-static/data.csv:
--------------------------------------------------------------------------------
1 | age,femaleBar,maleBar
2 | <1,449,469
3 | 1,458,496
4 | 2,510,536
5 | 3,476,510
6 | 4,518,559
7 | 5,551,558
8 | 6,505,527
9 | 7,528,569
10 | 8,561,611
11 | 9,592,580
12 | 10,564,604
13 | 11,596,642
14 | 12,579,609
15 | 13,568,622
16 | 14,563,574
17 | 15,571,597
18 | 16,554,537
19 | 17,542,543
20 | 18,425,502
21 | 19,431,478
22 | 20,495,487
23 | 21,514,500
24 | 22,563,502
25 | 23,535,464
26 | 24,515,537
27 | 25,554,510
28 | 26,548,529
29 | 27,601,513
30 | 28,579,527
31 | 29,606,529
32 | 30,629,566
33 | 31,617,512
34 | 32,612,565
35 | 33,646,539
36 | 34,647,553
37 | 35,574,532
38 | 36,600,539
39 | 37,560,520
40 | 38,565,492
41 | 39,583,498
42 | 40,555,516
43 | 41,581,529
44 | 42,499,500
45 | 43,501,447
46 | 44,502,435
47 | 45,501,519
48 | 46,492,452
49 | 47,560,498
50 | 48,546,595
51 | 49,633,622
52 | 50,680,629
53 | 51,664,589
54 | 52,698,610
55 | 53,705,646
56 | 54,709,648
57 | 55,759,677
58 | 56,719,731
59 | 57,753,680
60 | 58,730,681
61 | 59,740,662
62 | 60,691,693
63 | 61,633,633
64 | 62,650,627
65 | 63,590,596
66 | 64,575,609
67 | 65,572,548
68 | 66,542,511
69 | 67,489,521
70 | 68,561,482
71 | 69,507,513
72 | 70,491,466
73 | 71,534,496
74 | 72,545,472
75 | 73,543,524
76 | 74,523,491
77 | 75,371,391
78 | 76,372,347
79 | 77,341,275
80 | 78,345,221
81 | 79,322,236
82 | 80,274,229
83 | 81,302,213
84 | 82,281,215
85 | 83,310,199
86 | 84,273,168
87 | 85,209,169
88 | 86,219,122
89 | 87,166,122
90 | 88,168,101
91 | 89,135,81
92 | 90+,511,217
--------------------------------------------------------------------------------
/population-pyramid-static/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Population pyramid, static
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/population-pyramid-with-comparison-toggle/chart.css:
--------------------------------------------------------------------------------
1 | div.chartLabel>p {
2 | font-size: 16px;
3 | font-weight: 600;
4 | margin-bottom: 10px;
5 | }
6 |
7 | div#titles {
8 | display: flex;
9 | flex-wrap: nowrap;
10 | flex-direction: column;
11 | }
12 |
13 | .flex-row {
14 | display: flex;
15 | flex-direction: row;
16 | }
17 |
18 | /* buttons */
19 | fieldset {
20 | border: none;
21 | padding: 0 0 0 0;
22 | forced-color-adjust: none;
23 | }
24 |
25 | input[type="radio"] {
26 | opacity: 0;
27 | }
28 |
29 | .grid {
30 | display: flex;
31 | flex-wrap: wrap;
32 | list-style: none;
33 | margin: 0;
34 | }
35 |
36 | .grid-cell {
37 | display: block;
38 | border: 2px solid #206095;
39 | }
40 |
41 | .grid-cell label {
42 | font-size: 16px;
43 | padding-right: 17px;
44 | padding-left: 17px;
45 | display: block;
46 | max-width: 240px;
47 | min-height: 100%;
48 | padding-top: 3px;
49 | padding-bottom: 4px;
50 | margin-right:-1px;
51 | color: #206095;
52 | background: white;
53 | }
54 |
55 | input[type="radio"]:checked+label {
56 | color: white;
57 | background: #206095;
58 | }
59 |
60 | input[type='radio']:not(:checked)+label:hover {
61 | background-color: rgba(31, 95, 147, 0.2);
62 | cursor: pointer;
63 | }
64 |
65 | input[type='radio']:focus-visible+label {
66 | position: relative;
67 | box-shadow: 0 0 0px 3pt orange;
68 | outline: 2px dotted transparent;
69 | z-index: 10;
70 | }
71 |
72 | .legend--icon--circle{
73 | margin-right: 8px;
74 | }
--------------------------------------------------------------------------------
/population-pyramid-with-comparison-toggle/comparison-time.csv:
--------------------------------------------------------------------------------
1 | age,maleBar,femaleBar
2 | <1,800,775
3 | 1,775,703
4 | 2,771,712
5 | 3,767,714
6 | 4,805,731
7 | 5,813,747
8 | 6,783,679
9 | 7,697,643
10 | 8,659,645
11 | 9,743,689
12 | 10,701,693
13 | 11,818,766
14 | 12,789,767
15 | 13,767,779
16 | 14,893,830
17 | 15,922,790
18 | 16,909,869
19 | 17,959,871
20 | 18,909,866
21 | 19,863,877
22 | 20,823,735
23 | 21,765,774
24 | 22,826,842
25 | 23,821,851
26 | 24,837,818
27 | 25,815,849
28 | 26,741,795
29 | 27,715,784
30 | 28,687,705
31 | 29,718,819
32 | 30,744,812
33 | 31,699,783
34 | 32,629,713
35 | 33,658,659
36 | 34,601,689
37 | 35,671,689
38 | 36,693,724
39 | 37,707,730
40 | 38,771,879
41 | 39,850,940
42 | 40,872,949
43 | 41,838,974
44 | 42,920,943
45 | 43,886,1004
46 | 44,1019,1074
47 | 45,1010,1109
48 | 46,949,1039
49 | 47,1079,1055
50 | 48,994,1082
51 | 49,1020,1061
52 | 50,965,950
53 | 51,922,1000
54 | 52,948,974
55 | 53,958,931
56 | 54,863,918
57 | 55,839,870
58 | 56,827,840
59 | 57,818,914
60 | 58,795,887
61 | 59,815,853
62 | 60,824,874
63 | 61,860,956
64 | 62,897,955
65 | 63,1035,1032
66 | 64,990,1088
67 | 65,792,868
68 | 66,857,859
69 | 67,745,798
70 | 68,736,724
71 | 69,668,729
72 | 70,679,668
73 | 71,633,756
74 | 72,671,737
75 | 73,602,698
76 | 74,574,624
77 | 75,528,641
78 | 76,479,551
79 | 77,443,513
80 | 78,440,546
81 | 79,402,474
82 | 80,366,529
83 | 81,350,478
84 | 82,308,426
85 | 83,258,393
86 | 84,257,339
87 | 85,168,350
88 | 86,168,350
89 | 87,168,350
90 | 88,168,350
91 | 89,168,350
92 | 90+,168,350
--------------------------------------------------------------------------------
/population-pyramid-with-comparison-toggle/data.csv:
--------------------------------------------------------------------------------
1 | age,femaleBar,maleBar
2 | <1,449,469
3 | 1,458,496
4 | 2,510,536
5 | 3,476,510
6 | 4,518,559
7 | 5,551,558
8 | 6,505,527
9 | 7,528,569
10 | 8,561,611
11 | 9,592,580
12 | 10,564,604
13 | 11,596,642
14 | 12,579,609
15 | 13,568,622
16 | 14,563,574
17 | 15,571,597
18 | 16,554,537
19 | 17,542,543
20 | 18,425,502
21 | 19,431,478
22 | 20,495,487
23 | 21,514,500
24 | 22,563,502
25 | 23,535,464
26 | 24,515,537
27 | 25,554,510
28 | 26,548,529
29 | 27,601,513
30 | 28,579,527
31 | 29,606,529
32 | 30,629,566
33 | 31,617,512
34 | 32,612,565
35 | 33,646,539
36 | 34,647,553
37 | 35,574,532
38 | 36,600,539
39 | 37,560,520
40 | 38,565,492
41 | 39,583,498
42 | 40,555,516
43 | 41,581,529
44 | 42,499,500
45 | 43,501,447
46 | 44,502,435
47 | 45,501,519
48 | 46,492,452
49 | 47,560,498
50 | 48,546,595
51 | 49,633,622
52 | 50,680,629
53 | 51,664,589
54 | 52,698,610
55 | 53,705,646
56 | 54,709,648
57 | 55,759,677
58 | 56,719,731
59 | 57,753,680
60 | 58,730,681
61 | 59,740,662
62 | 60,691,693
63 | 61,633,633
64 | 62,650,627
65 | 63,590,596
66 | 64,575,609
67 | 65,572,548
68 | 66,542,511
69 | 67,489,521
70 | 68,561,482
71 | 69,507,513
72 | 70,491,466
73 | 71,534,496
74 | 72,545,472
75 | 73,543,524
76 | 74,523,491
77 | 75,371,391
78 | 76,372,347
79 | 77,341,275
80 | 78,345,221
81 | 79,322,236
82 | 80,274,229
83 | 81,302,213
84 | 82,281,215
85 | 83,310,199
86 | 84,273,168
87 | 85,209,169
88 | 86,219,122
89 | 87,166,122
90 | 88,168,101
91 | 89,135,81
92 | 90+,511,217
--------------------------------------------------------------------------------
/population-pyramid-with-comparison-toggle/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Population pyramid with comparison
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown-and-interactive-comparison/chart.css:
--------------------------------------------------------------------------------
1 | div.chartLabel>p {
2 | font-size: 16px;
3 | font-weight: 600;
4 | margin-bottom: 10px;
5 | }
6 |
7 | div#titles {
8 | display: flex;
9 | flex-wrap: nowrap;
10 | flex-direction: column;
11 | }
12 |
13 | .flex-row {
14 | display: flex;
15 | flex-direction: row;
16 | }
17 |
18 | /* buttons */
19 | div#select{
20 | margin-bottom: 20px;
21 | forced-color-adjust: none;
22 | }
23 |
24 | .legend--icon--circle{
25 | margin-right: 8px;
26 | }
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown-and-interactive-comparison/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "accessibleSummary":
4 | "This chart has been hidden from screen readers. The main message of the chart is summarised in the chart title.",
5 | "sourceText": "Office for National Statistics",
6 | "graphic_data_url": "data.csv",
7 | "comparison_data": "comparison.csv",
8 | "comparison_time_data": "comparison-time.csv",
9 | "dataType": "numbers",
10 | // dataType can be a "percentage" or "numbers" where it works out the percentage in the script
11 | "colour_palette": ["#9A86E9", "#3fb0b3"],
12 | // this is the lighter palette for reference lines ["#9A86E9", "#3fb0b3"]
13 | "comparison_colour_palette": ["#5c5185", "#306970"],
14 | "legend": ["Selected area", "2011"],
15 | "xAxisNumberFormat": ".1%",
16 | "yAxisTicksEvery": 10,
17 | "xAxisLabel": "Percentage",
18 | "yAxisLabel": "Age"
19 | },
20 | "optional": {
21 | "margin": {
22 | "sm": {
23 | "top": 30,
24 | "right": 10,
25 | "bottom": 50,
26 | "left": 10
27 | },
28 | "md": {
29 | "top": 30,
30 | "right": 10,
31 | "bottom": 50,
32 | "left": 10
33 | },
34 | "lg": {
35 | "top": 30,
36 | "right": 10,
37 | "bottom": 50,
38 | "left": 10
39 | },
40 | "centre": 60
41 | },
42 | "seriesHeight": {
43 | "sm": 6,
44 | "md": 6,
45 | "lg": 6
46 | },
47 | "xAxisTicks": {
48 | "sm": 3,
49 | "md": 3,
50 | "lg": 3
51 | },
52 | "mobileBreakpoint": 510,
53 | "mediumBreakpoint": 600
54 | },
55 | "elements": { "select": 1, "nav": 0, "legend": 1, "titles": 1 }
56 | };
57 |
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown-and-interactive-comparison/images/chosen-sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/population-pyramid-with-dropdown-and-interactive-comparison/images/chosen-sprite.png
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown-and-interactive-comparison/images/chosen-sprite@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/population-pyramid-with-dropdown-and-interactive-comparison/images/chosen-sprite@2x.png
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown-and-interactive-comparison/images/icons--chevron-down.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown-and-interactive-comparison/images/x_close.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown-and-interactive-comparison/images/x_close_slate.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown/chart.css:
--------------------------------------------------------------------------------
1 | div.chartLabel>p {
2 | font-size: 16px;
3 | font-weight: 600;
4 | margin-bottom: 10px;
5 | }
6 |
7 | div#titles {
8 | display: flex;
9 | flex-wrap: nowrap;
10 | flex-direction: column;
11 | }
12 |
13 | .flex-row {
14 | display: flex;
15 | flex-direction: row;
16 | }
17 |
18 | /* dropdown */
19 | div#select{
20 | margin-bottom: 20px;
21 | forced-color-adjust: none;
22 | }
23 |
24 | .legend--icon--circle{
25 | margin-right: 8px;
26 | }
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "accessibleSummary":
4 | "This chart has been hidden from screen readers. The main message of the chart is summarised in the chart title.",
5 | "sourceText": "Office for National Statistics",
6 | "graphic_data_url": "data.csv",
7 | "comparison_data": "comparison.csv",
8 | "comparison_time_data": "comparison-time.csv",
9 | "dataType": "numbers",
10 | // dataType can be a 'percentage' or 'numbers' where it works out the percentage in the script
11 | "colour_palette": ["#9A86E9", "#3fb0b3"],
12 | // this is the lighter palette for reference lines ["#9A86E9", "#3fb0b3"]
13 | "comparison_colour_palette": ["#5c5185", "#306970"],
14 | "legend": ["Selected area", "England and Wales"],
15 | "xAxisNumberFormat": ".1%",
16 | "yAxisTicksEvery": 10,
17 | "xAxisLabel": "Percentage",
18 | "yAxisLabel": "Age"
19 | },
20 | "optional": {
21 | "margin": {
22 | "sm": {
23 | "top": 30,
24 | "right": 10,
25 | "bottom": 50,
26 | "left": 10
27 | },
28 | "md": {
29 | "top": 30,
30 | "right": 10,
31 | "bottom": 50,
32 | "left": 10
33 | },
34 | "lg": {
35 | "top": 30,
36 | "right": 10,
37 | "bottom": 50,
38 | "left": 10
39 | },
40 | "centre": 60
41 | },
42 | "seriesHeight": {
43 | "sm": 6,
44 | "md": 6,
45 | "lg": 6
46 | },
47 | "xAxisTicks": {
48 | "sm": 3,
49 | "md": 3,
50 | "lg": 3
51 | },
52 | "mobileBreakpoint": 510,
53 | "mediumBreakpoint": 600
54 | },
55 | "elements": { "select": 1, "nav": 0, "legend": 1, "titles": 1 }
56 | };
57 |
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown/images/chosen-sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/population-pyramid-with-dropdown/images/chosen-sprite.png
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown/images/chosen-sprite@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/population-pyramid-with-dropdown/images/chosen-sprite@2x.png
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown/images/icons--chevron-down.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown/images/x_close.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/population-pyramid-with-dropdown/images/x_close_slate.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/range-plot-sm/chart.css:
--------------------------------------------------------------------------------
1 | line.between{
2 | stroke:#c6c6c6;
3 | stroke-width:3px;
4 | }
5 |
6 | .dataLabels{
7 | font-weight: 600;
8 | font-size: 14px;
9 | }
10 |
11 | p.groupLabels{
12 | padding-top:15px;
13 | font-weight: 600;
14 | }
15 |
16 |
17 | .legend--icon--diamond {
18 | height: 10px;
19 | width: 10px;
20 | align-self: center;
21 | transform: rotate(45deg);
22 | flex-shrink: 0;
23 | }
24 |
25 | .title {
26 | font-size: 14px;
27 | font-weight: 600;
28 | fill: #414042
29 | }
--------------------------------------------------------------------------------
/range-plot-sm/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "legendLabels": { "min": "Moved travel to work area (TTWA)", "max": "Moved region" },
5 | //the keys match the column names
6 | "colour_palette": ["#118C7B", "#206095"],
7 | "sourceText": "Office for National Statistics (ONS) analysis using Longitudinal Education Outcomes (LEO) from the Department for Education (DfE)",
8 | "accessibleSummary":
9 | "Here is the screenreader text describing the chart.",
10 | "numberFormat": ".0%",
11 | "xAxisTickFormat": ".0%",
12 | "xAxisLabel": "Percentage",
13 | "xDomain": [0.2,0.95],
14 | // either auto or a custom domain as an array e.g [0,100]
15 | "showDataLabels": false
16 | },
17 | "optional": {
18 | "chart_every": {
19 | "sm" : 1,
20 | "md" : 2,
21 | "lg" : 2
22 | },
23 | "dropYAxis": true,
24 | "margin": {
25 | "sm": {
26 | "top": 20,
27 | "right": 20,
28 | "bottom": 20,
29 | "left": 140
30 | },
31 | "md": {
32 | "top": 20,
33 | "right": 20,
34 | "bottom": 20,
35 | "left": 140
36 | },
37 | "lg": {
38 | "top": 20,
39 | "right": 20,
40 | "bottom": 40,
41 | "left": 150
42 | }
43 | },
44 | "seriesHeight": {
45 | "sm": 40,
46 | "md": 40,
47 | "lg": 40
48 | },
49 | "xAxisTicks": {
50 | "sm": 5,
51 | "md": 5,
52 | "lg": 5
53 | },
54 | "mobileBreakpoint": 510,
55 | "mediumBreakpoint": 600
56 | }
57 | };
58 |
--------------------------------------------------------------------------------
/range-plot-sm/data.csv:
--------------------------------------------------------------------------------
1 | name,group,category,min,max
2 | Majority conurbation TTWA,Cities (outside London),Graduates,0.81,0.65
3 | Majority conurbation TTWA,Large towns,Graduates,0.70,0.52
4 | Majority Town & City (Large) TTWA,Large towns,Graduates,0.84,0.65
5 | Majority conurbation TTWA,Medium towns,Graduates,0.64,0.47
6 | Majority Town & City (Large) TTWA,Medium towns,Graduates,0.77,0.57
7 | Majority Town & City (Small) TTWA,Medium towns,Graduates,0.85,0.59
8 | Majority Rural TTWA,Medium towns,Graduates,0.87,0.62
9 | Majority conurbation TTWA,Small towns,Graduates,0.65,0.52
10 | Majority Town & City (Large) TTWA,Small towns,Graduates,0.75,0.57
11 | Majority Town & City (Small) TTWA,Small towns,Graduates,0.80,0.56
12 | Majority Rural TTWA,Small towns,Graduates,0.86,0.59
13 | Majority conurbation TTWA,Cities (outside London),L3+ non-graduates,0.59,0.39
14 | Majority conurbation TTWA,Large towns,L3+ non-graduates,0.49,0.27
15 | Majority Town & City (Large) TTWA,Large towns,L3+ non-graduates,0.62,0.38
16 | Majority conurbation TTWA,Medium towns,L3+ non-graduates,0.43,0.26
17 | Majority Town & City (Large) TTWA,Medium towns,L3+ non-graduates,0.52,0.32
18 | Majority Town & City (Small) TTWA,Medium towns,L3+ non-graduates,0.62,0.34
19 | Majority Rural TTWA,Medium towns,L3+ non-graduates,0.62,0.36
20 | Majority conurbation TTWA,Small towns,L3+ non-graduates,0.42,0.45
21 | Majority Town & City (Large) TTWA,Small towns,L3+ non-graduates,0.48,0.38
22 | Majority Town & City (Small) TTWA,Small towns,L3+ non-graduates,0.54,0.43
23 | Majority Rural TTWA,Small towns,L3+ non-graduates,0.64,0.51
--------------------------------------------------------------------------------
/range-plot-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Range plot
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/range-plot/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/range-plot/.DS_Store
--------------------------------------------------------------------------------
/range-plot/chart.css:
--------------------------------------------------------------------------------
1 | line.between{
2 | stroke:#c6c6c6;
3 | stroke-width:3px;
4 | }
5 |
6 | .dataLabels{
7 | font-weight: 600;
8 | font-size: 14px;
9 | }
10 |
11 | div.legend--icon--diamond{
12 | height: 12px;
13 | width: 12px;
14 | align-self: center;
15 | flex-shrink: 0;
16 | forced-color-adjust: none;
17 | transform: rotate(45deg);
18 | }
--------------------------------------------------------------------------------
/range-plot/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "legendLabels": { "min": "2015-2019", "max": "2020" },
5 | //the keys match the column names
6 | "colour_palette": ["#8D8C8E", "#206095"],
7 | "sourceText": "Office for National Statistics",
8 | "accessibleSummary":
9 | "Here is the screenreader text describing the chart.",
10 | "numberFormat": ".0f",
11 | "xAxisTickFormat": ".0f",
12 | "xAxisLabel": "x axis label",
13 | "xDomain": [0, 100],
14 | // either auto or a custom domain as an array e.g [0,100]
15 | "showDataLabels": true,
16 | "useDiamonds": true
17 | },
18 | "optional": {
19 | "margin": {
20 | "sm": {
21 | "top": 5,
22 | "right": 20,
23 | "bottom": 40,
24 | "left": 100
25 | },
26 | "md": {
27 | "top": 5,
28 | "right": 20,
29 | "bottom": 40,
30 | "left": 100
31 | },
32 | "lg": {
33 | "top": 5,
34 | "right": 20,
35 | "bottom": 40,
36 | "left": 100
37 | }
38 | },
39 | "seriesHeight": {
40 | "sm": 40,
41 | "md": 40,
42 | "lg": 40
43 | },
44 | "xAxisTicks": {
45 | "sm": 4,
46 | "md": 8,
47 | "lg": 10
48 | },
49 | "mobileBreakpoint": 510,
50 | "mediumBreakpoint": 600
51 | }
52 | };
53 |
--------------------------------------------------------------------------------
/range-plot/data.csv:
--------------------------------------------------------------------------------
1 | name,group,min,max
2 | England,Group name 1,44.79967469,65.51485629
3 | Wales,Group name 1,19.5544272,86.4112192
4 | North East,Group name 2,21.04544788,55.54073662
5 | North West,Group name 2,39.13579896,51.13881403
6 | Yorkshire and The Humber,Group name 2,30.57469086,95.726681
7 | East Midlands,Group name 2,29.36591976,51.76293031
8 | West Midlands,Group name 2,39.86949419,80.18516748
9 | East,Group name 2,17.64884078,83.95086243
10 | London,Group name 2,43.91069538,57.87608769
11 | South West,Group name 2,9.379207492,64.9079148
12 | South East,Group name 2,8.973142806,61.1748033
13 | Another name,Group name 3,65.58717189,24.79415817
14 | And another,Group name 3,43,42.56371279
--------------------------------------------------------------------------------
/range-plot/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Range plot
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/refresh.bat:
--------------------------------------------------------------------------------
1 | echo Refreshing library to latest version
2 | git config --global --add safe.directory '%(prefix)///fa1rvwwsxx343/datavisweb/repos/Charts'
3 | git fetch --all
4 | git reset --hard origin/main
5 |
--------------------------------------------------------------------------------
/ridgeline-plot/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/ridgeline-plot/config.js:
--------------------------------------------------------------------------------
1 | config = {
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": "#206095",
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary": "Here is the screenreader text describing the chart.",
7 | "dataLabels": {
8 | "show": true,
9 | "numberFormat": ".0%"
10 | },
11 | "xDomain": "auto",
12 | "dateFormat": "%d-%m-%Y %-I:%M:%S",
13 | // either "auto" or an array for the x domain e.g. [0,100]
14 | "xAxisLabel": "x axis label"
15 | },
16 | "optional": {
17 | "margin": {
18 | "sm": {
19 | "top": 15,
20 | "right": 20,
21 | "bottom": 50,
22 | "left": 120
23 | },
24 | "md": {
25 | "top": 15,
26 | "right": 20,
27 | "bottom": 50,
28 | "left": 120
29 | },
30 | "lg": {
31 | "top": 15,
32 | "right": 20,
33 | "bottom": 50,
34 | "left": 120
35 | }
36 | },
37 | "seriesHeight": {
38 | "sm": 30,
39 | "md": 30,
40 | "lg": 30
41 | },
42 | "xAxisTicks": {
43 | "sm": 4,
44 | "md": 8,
45 | "lg": 10
46 | },
47 | "mobileBreakpoint": 510,
48 | "mediumBreakpoint": 600
49 | },
50 | "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
51 | "chart_build": {}
52 | };
53 |
--------------------------------------------------------------------------------
/ridgeline-plot/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/ridgeline-plot/fallback.png
--------------------------------------------------------------------------------
/ridgeline-plot/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Ridgeline Plot
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/scatter-plot-animated/css/chosen-sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/css/chosen-sprite.png
--------------------------------------------------------------------------------
/scatter-plot-animated/css/chosen-sprite@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/css/chosen-sprite@2x.png
--------------------------------------------------------------------------------
/scatter-plot-animated/datadownload.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/datadownload.xlsx
--------------------------------------------------------------------------------
/scatter-plot-animated/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/scatter-plot-animated/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/scatter-plot-animated/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/scatter-plot-animated/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/scatter-plot-animated/images/chosen-sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/images/chosen-sprite.png
--------------------------------------------------------------------------------
/scatter-plot-animated/images/chosen-sprite@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/images/chosen-sprite@2x.png
--------------------------------------------------------------------------------
/scatter-plot-animated/images/fast-forward.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/images/fast-forward.png
--------------------------------------------------------------------------------
/scatter-plot-animated/images/fast-forward.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/scatter-plot-animated/images/icons--chevron-down.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/scatter-plot-animated/images/pause.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/images/pause.png
--------------------------------------------------------------------------------
/scatter-plot-animated/images/pause.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/scatter-plot-animated/images/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/images/play.png
--------------------------------------------------------------------------------
/scatter-plot-animated/images/play.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/scatter-plot-animated/images/rewind.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-animated/images/rewind.png
--------------------------------------------------------------------------------
/scatter-plot-animated/images/rewind.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/scatter-plot-animated/images/x_close.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/scatter-plot-animated/images/x_close_slate.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/scatter-plot-sm/chart.css:
--------------------------------------------------------------------------------
1 | .grid line {
2 | stroke: #ccc;
3 | stroke-opacity: 0.7;
4 | }
5 |
6 | .grid .tick {
7 | stroke: lightgrey;
8 | stroke-opacity: 0.7;
9 | shape-rendering: crispEdges;
10 | }
11 |
12 | .grid path {
13 | stroke-width: 0;
14 | }
15 |
16 |
17 |
18 | .chart-container {
19 | display: inline-block;
20 | vertical-align: top;
21 | }
--------------------------------------------------------------------------------
/scatter-plot-sm/data.csv:
--------------------------------------------------------------------------------
1 | name,series,xvalue,yvalue,group
2 | Other services,series1,0.987848719,0.9,group1
3 | Manufacturing,series1,0.983661406,0.986,group1
4 | Construction,series1,0.681288045,0.4,group1
5 | Arts,series1,0.481757214,0.2,group1
6 | Administrative,series1,0.209665614,0.6,group1
7 | Wholesale trade,series1,0.176396639,0.4,group1
8 | Administrative and supportive service activities,series1,0.047910167,0.15,group1
9 | Other services,series1,0.207848719,0.2,group2
10 | Manufacturing,series1,0.603661406,0.6,group2
11 | Construction,series1,0.21288045,0.2,group2
12 | Arts,series1,0.281757214,0.4,group2
13 | Administrative,series1,0.409665614,0.8,group2
14 | Wholesale trade,series1,0.276396639,0.5,group2
15 | Administrative and supportive service activities,series1,0.147910167,0.25,group2
16 | Other services,series2,0.058999591,0.9,group1
17 | Manufacturing,series2,0.004739396,0.986,group1
18 | Construction,series2,0.432883836,0.4,group1
19 | Arts,series2,0.040419716,0.2,group1
20 | Administrative,series2,0.173412393,0.6,group1
21 | Wholesale trade,series2,0.07446541,0.4,group1
22 | Administrative and supportive service activities,series2,0.025038262,0.15,group1
23 | Other services,series2,0.131980582,0.2,group2
24 | Manufacturing,series2,0.419579481,0.6,group2
25 | Construction,series2,0.177955165,0.2,group2
26 | Arts,series2,0.167047386,0.4,group2
27 | Administrative,series2,0.084334964,0.8,group2
28 | Wholesale trade,series2,0.260463564,0.5,group2
29 | Administrative and supportive service activities,series2,0.038412599,0.25,group2
30 |
--------------------------------------------------------------------------------
/scatter-plot-sm/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot-sm/fallback.png
--------------------------------------------------------------------------------
/scatter-plot-sm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Small multiple Scatter plot
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/scatter-plot/chart.css:
--------------------------------------------------------------------------------
1 | .grid line {
2 | stroke: #ccc;
3 | stroke-opacity: 0.7;
4 | }
5 |
6 | .grid .tick {
7 | stroke: lightgrey;
8 | stroke-opacity: 0.7;
9 | shape-rendering: crispEdges;
10 | }
11 |
12 | .grid path {
13 | stroke-width: 0;
14 | }
--------------------------------------------------------------------------------
/scatter-plot/config.js:
--------------------------------------------------------------------------------
1 | config={
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": ["#206095","#A8BD3A","#F66068","#27A0CC"],
5 | "fillOpacity":1,
6 | "strokeOpacity":1,
7 | "radius": "4",
8 | "sourceText": "Office for National Statistics",
9 | "accessibleSummary":"Here is the screenreader text describing the chart.",
10 | "xDomain":[0,0.85],
11 | "yDomain":[-0.14,0.85],
12 | // either "auto" or an array for the x/y domain e.g. [0,100]
13 | "xAxisLabel":"Change since last month",
14 | "yAxisLabel":"Difference from trend",
15 | "xAxisFormat":".0%",
16 | "yAxisFormat":".0%"
17 | },
18 | "optional": {
19 | "aspectRatio": {
20 | "sm": [1, 1],
21 | "md": [1, 1],
22 | "lg": [1, 1]
23 | },
24 | "margin": {
25 | "sm": {
26 | "top": 30,
27 | "right": 20,
28 | "bottom": 75,
29 | "left": 50
30 | },
31 | "md": {
32 | "top": 30,
33 | "right": 20,
34 | "bottom": 75,
35 | "left": 50
36 | },
37 | "lg": {
38 | "top": 30,
39 | "right":50,
40 | "bottom": 75,
41 | "left": 50
42 | }
43 | },
44 | "xAxisTicks":{
45 | "sm":4,
46 | "md":8,
47 | "lg":8
48 | },
49 | "yAxisTicks":{
50 | "sm":4,
51 | "md":4,
52 | "lg":10
53 | },
54 | "mobileBreakpoint": 510,
55 | "mediumBreakpoint": 600
56 | },
57 | "elements":{"select":0, "nav":0, "legend":0, "titles":0},
58 | "chart_build":{}
59 | };
60 |
--------------------------------------------------------------------------------
/scatter-plot/data.csv:
--------------------------------------------------------------------------------
1 | name,xvalue,yvalue,group,highlight
2 | Construction,0.681288045,0.5,Category 3,
3 | Manufacturing,0.983661406,0.86,Category 1,
4 | Construction,0.681288045,0.4,Category 3,
5 | Arts,0.481757214,0.2,Category 2,
6 | Administrative,0.209665614,0.6,Category 1,
7 | Wholesale trade,0.176396639,0.4,Category 1,
8 | Administrative and supportive service activities,0.047910167,0.15,Category 1,yvalue
9 | Other services,0.207848719,0.2,Category 2,y
10 | Manufacturing,0.603661406,0.6,Category 4,
11 | Construction,0.21288045,-0.05,Category 4,
12 | Arts,0.281757214,0.4,Category 2,
13 | Administrative,0.409665614,0.8,Category 3,
14 | Wholesale trade,0.276396639,0.5,Category 3,
15 | Administrative and supportive service activities,0.147910167,0.25,Category 2,
--------------------------------------------------------------------------------
/scatter-plot/fallback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ONSvisual/Charts/7a5f159253dd7f8c58aeb7b744dbaf5149fa14af/scatter-plot/fallback.png
--------------------------------------------------------------------------------
/scatter-plot/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Scatter plot
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/slope-chart/chart.css:
--------------------------------------------------------------------------------
1 | .grid line {
2 | stroke: #ccc;
3 | stroke-opacity: 0.7;
4 | }
5 |
6 | /* Need to discuss this with the team */
7 | .axis path,
8 | .axis line {
9 | stroke: none; /* Changes the color of the axis lines */
10 | }
11 |
12 | .grid .tick {
13 | stroke: lightgrey; /* Changes the color of the gridlines */
14 | stroke-opacity: 0.7;
15 | shape-rendering: crispEdges; /* Makes the gridlines appear more crisp */
16 | }
17 | .grid path {
18 | stroke-width: 0; /* Removes the line along the y-axis */
19 | }
20 |
21 | .directLineLabelBold {
22 | font-size: 14px;
23 | font-weight: 700;
24 | }
25 | .directLineLabelRegular {
26 | font-size: 14px;
27 | font-weight: 500;
28 | }
--------------------------------------------------------------------------------
/slope-chart/data.csv:
--------------------------------------------------------------------------------
1 | date,All Sikh,Ethnic group and religion,Religion only,Ethnic group only
2 | 2011,430020,76500,346658,6862
3 | 2021,525865,97910,426230,1725
4 |
--------------------------------------------------------------------------------
/slope-chart/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Slope chart
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/split-bar-chart/chart.css:
--------------------------------------------------------------------------------
1 | /* space between the plots */
2 | div.plots{
3 | padding-bottom:20px;
4 | }
5 |
6 | /* styles for plot titles */
7 | div.plots p.plot--title{
8 | font-weight: 700;
9 | margin-bottom:0;
10 | }
11 |
12 | div.column{
13 | padding-right:10px;
14 | display:inline-block
15 | }
16 |
17 | div.rowLabel{
18 | display: inline-block;
19 | }
20 |
21 | div.headers{
22 | margin-right: -10px;
23 | display: inline-block;
24 | }
25 |
26 | div.rowLabel span{
27 | font-size: 14px;
28 | color:#414042;
29 | text-align: right;
30 | vertical-align: middle;
31 | display:block;
32 | padding-right:10px;
33 | height:30px;
34 | }
35 |
36 | div.column span{
37 | font-weight: 600;
38 | font-size: 14px;
39 | color:#414042;
40 | }
41 |
42 | div.splitBar-inner--background{
43 | background: #ececec;
44 | height:30px;
45 | position: relative;
46 | forced-color-adjust: none;
47 | }
48 |
49 |
50 | div.splitBar-row{
51 | display: flex;
52 | align-items: center;
53 | margin-bottom: 10px;
54 | }
55 |
56 | /* set the margin to 0 for the 2nd to last div so the zero is close */
57 | div.chart div:nth-last-child(2) {
58 | margin-bottom: 0;
59 | }
60 |
61 | div.splitBar-bar--value{
62 | position:absolute;
63 | top:0;
64 | height:100%;
65 | }
66 |
67 | div.splitBar-bar--label{
68 | text-align: left;
69 | padding:0 5px;
70 | line-height: 27px;
71 | }
72 |
73 | div.splitBar-label{
74 | margin-bottom:10px;
75 | }
--------------------------------------------------------------------------------
/split-bar-chart/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Split bar chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/z-annotation-example/chart.css:
--------------------------------------------------------------------------------
1 | .dataLabels{
2 | font-weight: 600;
3 | font-size: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/z-annotation-example/config.js:
--------------------------------------------------------------------------------
1 | config={
2 | "essential": {
3 | "graphic_data_url": "data.csv",
4 | "colour_palette": "#206095",
5 | "sourceText": "Office for National Statistics",
6 | "accessibleSummary":"Here is the screenreader text describing the chart.",
7 | "dataLabels":{
8 | "show":true,
9 | "numberFormat":".0%"
10 | },
11 | "xDomain":[0,1],
12 | // either "auto" or an array for the x domain e.g. [0,100]
13 | "xAxisLabel":"x axis label"
14 | },
15 | "optional": {
16 | "margin": {
17 | "sm": {
18 | "top": 15,
19 | "right": 20,
20 | "bottom": 50,
21 | "left": 120
22 | },
23 | "md": {
24 | "top": 15,
25 | "right": 20,
26 | "bottom": 50,
27 | "left": 120
28 | },
29 | "lg": {
30 | "top": 15,
31 | "right": 20,
32 | "bottom": 50,
33 | "left": 120
34 | }
35 | },
36 | "seriesHeight":{
37 | "sm":30,
38 | "md":30,
39 | "lg":30
40 | },
41 | "xAxisTicks":{
42 | "sm":4,
43 | "md":8,
44 | "lg":10
45 | },
46 | "mobileBreakpoint": 510,
47 | "mediumBreakpoint": 600
48 | },
49 | "elements":{"select":0, "nav":0, "legend":0, "titles":0},
50 | "chart_build":{}
51 | };
52 |
--------------------------------------------------------------------------------
/z-annotation-example/data.csv:
--------------------------------------------------------------------------------
1 | name,value
2 | Small bar,0.047910167
3 | Quite small bar,0.047910167
4 | Other services,0.987848719
5 | Manufacturing,0.983661406
6 | Construction,0.681288045
7 | Arts,0.481757214
8 | Administrative,0.209665614
9 | Wholesale trade,0.176396639
10 | Administrative and supportive service activities,0.047910167
11 | A few more,0.047910167
12 | Small bars,0.047910167
--------------------------------------------------------------------------------
/z-annotation-example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Bar chart
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------