├── .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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 5 | 10 | icons--chevron-down-thin 11 | Created with Sketch. 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /bar-chart-horizontal-with-dropdown/images/x_close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /bar-chart-horizontal-with-dropdown/images/x_close_slate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /bubble-chart-animated/images/icons--chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | icons--chevron-down-thin 11 | Created with Sketch. 12 | 13 | 14 | 15 | 16 | 17 | 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 | 2 | 3 | 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 | 2 | 3 | 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 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /bubble-chart-animated/images/x_close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /bubble-chart-animated/images/x_close_slate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 5 | 10 | icons--chevron-down-thin 11 | Created with Sketch. 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /population-pyramid-with-dropdown-and-interactive-comparison/images/x_close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /population-pyramid-with-dropdown-and-interactive-comparison/images/x_close_slate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 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 | 5 | 10 | icons--chevron-down-thin 11 | Created with Sketch. 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /population-pyramid-with-dropdown/images/x_close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /population-pyramid-with-dropdown/images/x_close_slate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 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 | 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 | 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 | 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 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /scatter-plot-animated/images/icons--chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | icons--chevron-down-thin 11 | Created with Sketch. 12 | 13 | 14 | 15 | 16 | 17 | 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 | 2 | 3 | 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 | 2 | 3 | 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 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /scatter-plot-animated/images/x_close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /scatter-plot-animated/images/x_close_slate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 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 | 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 | 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 | 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 | 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 | 28 | 29 |
30 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | --------------------------------------------------------------------------------