├── .gitignore ├── README.md ├── all-templates ├── bar-and-line │ ├── config.json │ ├── css │ │ └── styles.css │ ├── data.csv │ ├── fallback.png │ ├── index.html │ └── js │ │ └── script.js ├── bump-chart │ ├── config.json │ ├── data.csv │ ├── datadownload.xlsx │ ├── fallback.png │ ├── image.png │ └── index.html ├── circle-category │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── circle-timeline │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── clustered-bar-horizontal │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── clustered-bar-vertical │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── dot-plot-jiggle │ ├── config.json │ ├── data.csv │ ├── datadownload.xlsx │ ├── fallback.png │ └── index.html ├── heatmap │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── histogram-double │ ├── config.js │ ├── data.csv │ ├── datadownload.xlsx │ ├── fallback.png │ └── index.html ├── histogram │ ├── config.js │ ├── data.csv │ ├── datadownload.xlsx │ ├── fallback.png │ └── index.html ├── icon-array │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── images │ ├── caret-down-solid.svg │ ├── chosen-sprite-grey@2x.jpg │ ├── chosen-sprite-white@2x.png │ ├── chosen-sprite.png │ ├── chosen-sprite@2x.png │ ├── icons--chevron-down.svg │ ├── x_close.svg │ └── x_close_slate.svg ├── lib-sc │ ├── bootstrap-grid.css │ ├── bootstrap.min.js │ ├── chosen-sprite.png │ ├── chosen-sprite@2x.png │ ├── chosen.jquery.js │ ├── chosen.order.jquery.min.js │ ├── chroma.min.js │ ├── d3-annotation.js │ ├── d3-iconarray.js │ ├── d3-jetpack.js │ ├── d3-legend.min.js │ ├── d3-selection-multi.v1.min.js │ ├── d3-time.v1.min.js │ ├── d3.v3.5.17.min.js │ ├── d3.v4.min.js │ ├── d3v4jetpack.js │ ├── globalStyle.css │ ├── globalStyle2.css │ ├── jquery-ui-1.10.4.custom.min.js │ ├── jquery.js │ ├── jquery.ui.labeledslider.js │ ├── modernizr.svg.min.js │ ├── pym.js │ ├── queue.js │ ├── saveSvgAsPng.js │ ├── ss.js │ ├── style-chosen.css │ ├── styles.css │ ├── swoopy-drag-d3v4.js │ ├── swoopy-drag.js │ ├── tabs.css │ ├── tabstyles.css │ └── topojson.js ├── line-ordinal-band │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── line-ordinal │ ├── config.json │ ├── data.csv │ ├── download.png │ ├── fallback.png │ └── index.html ├── line-with-difference │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── line-with-dropdown │ ├── chart.css │ ├── config.js │ ├── data.csv │ ├── datadownload.xlsx │ ├── fallback.png │ ├── index.html │ └── script.js ├── line │ ├── config.js │ ├── data.csv │ ├── download.png │ ├── fallback.png │ └── index.html ├── marimekko │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── quiz │ ├── config.json │ ├── css │ │ ├── bootstrap-slider.css │ │ ├── bootstrap-slider.min.css │ │ ├── bootstrap.css │ │ ├── data.csv │ │ ├── img │ │ │ ├── ChildrenSpending_header_outlines-01.svg │ │ │ ├── ChildrenSpending_mobile_outlines-03.svg │ │ │ ├── boy_and_girl-05.svg │ │ │ ├── boy_and_girl-06.svg │ │ │ ├── boy_and_girl-08.svg │ │ │ ├── bullet-large.svg │ │ │ ├── bullet-medium.svg │ │ │ ├── bullet-small.svg │ │ │ └── sweet_2-01.svg │ │ └── mystyles.css │ ├── img │ │ ├── ChildrenSpending_header_outlines-01.svg │ │ ├── ChildrenSpending_mobile_outlines-03.svg │ │ ├── boy_and_girl-05.svg │ │ ├── boy_and_girl-06.svg │ │ ├── boy_and_girl-08.svg │ │ ├── bullet-large.svg │ │ ├── bullet-medium.svg │ │ ├── bullet-small.svg │ │ └── sweet_2-01.svg │ ├── index.html │ ├── js │ │ ├── average_spend_by_age.js │ │ ├── bootstrap-slider.js │ │ ├── bootstrap-slider.min.js │ │ └── jquery-ui-1.10.4.custom.min.js │ └── lib-sc │ │ ├── d3-jetpack.js │ │ ├── d3.v3.5.17.min.js │ │ ├── d3.v4.min.js │ │ ├── d3v4jetpack.js │ │ ├── globalStyle.css │ │ ├── jquery-ui-1.10.4.custom.min.js │ │ ├── jquery.js │ │ ├── modernizr.svg.min.js │ │ ├── pym.js │ │ ├── saveSvgAsPng.js │ │ ├── styles.css │ │ ├── swoopy-drag-d3v4.js │ │ └── swoopy-drag.js ├── regional-map-bar │ ├── config.json │ ├── data.csv │ ├── fallback.png │ ├── geogEWregion.json │ ├── geogUKregion.json │ └── index.html ├── sankey-dropdown │ ├── config.json │ ├── data.csv │ ├── fallback.png │ ├── index.html │ └── sankey.js ├── sankey │ ├── config.json │ ├── data.csv │ ├── fallback.png │ ├── index.html │ └── sankey.js ├── scatter-canvas │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── scatter-voronoi-dropdown │ ├── data │ │ ├── config.json │ │ ├── data_download.csv │ │ └── dummydata.csv │ ├── fallback.png │ └── index.html ├── scatter-voronoi │ ├── config.js │ ├── dummydata.csv │ ├── fallback.png │ ├── index.html │ ├── script.js │ └── styles.css ├── scatter-with-groups │ ├── config.json │ ├── data.csv │ ├── data.xls │ ├── fallback.png │ └── index.html ├── simple-bar-horizontal │ ├── config.js │ ├── data.csv │ └── index.html ├── simple-bar-vertical │ ├── config.js │ ├── data.csv │ └── index.html ├── slope-multiple │ ├── config.json │ ├── data.csv │ ├── data.xlsx │ ├── fallback.png │ ├── index.html │ └── scriptb.js ├── slope-voronoi │ ├── config.json │ ├── data.csv │ ├── fallback.png │ ├── index.html │ └── scriptb.js ├── slope │ ├── config.json │ ├── data.csv │ ├── fallback.png │ ├── index.html │ └── scriptb.js ├── small-multiple-bar-horizontal │ ├── config.json │ ├── data.csv │ ├── datadownload.xlsx │ ├── fallback.png │ └── index.html ├── small-multiple-horizontal-clustered-bar-chart-confidence-intervals │ ├── config.json │ ├── datadownload.xlsx │ ├── fallback.png │ ├── index.html │ └── regions.csv ├── small-multiple-horizontal-clustered-bar-chart-many │ ├── config.json │ ├── datadownload.xlsx │ ├── fallback.png │ ├── index.html │ └── regions.csv ├── small-multiple-horizontal-clustered-bar-confidence-intervals-linear-axis │ ├── config.json │ ├── datadownload.xlsx │ ├── fallback.png │ ├── index.html │ └── regions.csv ├── small-multiple-line-category │ ├── config.json │ ├── data-yeartodate-hospcarehome.csv │ └── index.html ├── small-multiple-line │ ├── config.json │ ├── datadownload.xlsx │ ├── fallback.png │ ├── index.html │ └── regions.csv ├── small-multiple-stacked-area │ ├── config.json │ ├── data.csv │ ├── datadownload.xlsx │ └── index.html ├── small-multiple-stacked-bar-vertical │ ├── config.json │ ├── databyagefiltered.csv │ ├── diffbyage.csv │ ├── diffbyageall.csv │ ├── fallback.png │ └── index.html ├── small-multiples-grouped-column │ ├── Thumbs.db │ ├── config.json │ ├── data.csv │ └── index.html ├── small-multiples-stacked-bar │ ├── config.json │ ├── data.csv │ ├── datadownload.csv │ ├── fallback.png │ └── index.html ├── split-bar-multiple │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── split-bar-varied-xscales │ ├── config.json │ ├── data.csv │ ├── fallback.png │ ├── index.html │ ├── occs.csv │ └── wrapper.html ├── split-bar │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── stacked-area │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── stacked-bar-horizontal │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── stacked-bar-vertical-with-negatives │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── stacked-bar-vertical │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html ├── stacked-lines │ ├── Thumbs.db │ ├── config.json │ ├── fallback.png │ ├── index.html │ ├── styles.css │ ├── var0.csv │ ├── var1.csv │ └── var2.csv ├── tie-fighter │ ├── config.json │ ├── data.csv │ ├── fallback.png │ └── index.html └── tiefighter-with-buttons │ ├── chart.css │ ├── config.js │ ├── config.json │ ├── data.csv │ ├── fallback.png │ ├── index.html │ └── script.js ├── how-to-template ├── lib │ ├── bootstrap-grid.css │ ├── bootstrap.min.js │ ├── chosen-sprite.png │ ├── chosen-sprite@2x.png │ ├── chosen.jquery.js │ ├── chosen.order.jquery.min.js │ ├── chroma.min.js │ ├── d3-annotation.js │ ├── d3-iconarray.js │ ├── d3-jetpack.js │ ├── d3-legend.min.js │ ├── d3-selection-multi.v1.min.js │ ├── d3-time.v1.min.js │ ├── d3.v3.5.17.min.js │ ├── d3.v4.min.js │ ├── d3v4jetpack.js │ ├── footer.js │ ├── globalStyle.css │ ├── globalStyle2.css │ ├── jquery-ui-1.10.4.custom.min.js │ ├── jquery.js │ ├── jquery.ui.labeledslider.js │ ├── modernizr.svg.min.js │ ├── pym.js │ ├── queue.js │ ├── saveSvgAsPng.js │ ├── ss.js │ ├── style-chosen.css │ ├── styles.css │ ├── swoopy-drag-d3v4.js │ ├── swoopy-drag.js │ ├── tabs.css │ ├── tabstyles.css │ └── topojson.js └── template │ ├── config.js │ ├── data.csv │ ├── index.html │ ├── script.js │ └── style.css ├── img ├── 003C57.png ├── 118C7B.png ├── 1AA590.png ├── 206095.png ├── 22D0B6.png ├── 27A0CC.png ├── 746CB1.png ├── 871A5B.png ├── 8A9B2E.png ├── A8BD3A.png ├── F39431.png ├── F56927.png └── F66068.png └── showcase ├── README.md ├── allplots.json ├── index.html └── makepage.py /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | .DS_Store 4 | .DS_Store 5 | .DS_Store 6 | .DS_Store 7 | .DS_Store 8 | .DS_Store 9 | -------------------------------------------------------------------------------- /all-templates/bar-and-line/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "dateFormat": "%Y", 5 | "colour_palette": ["#206095", "#118C7B", "#003C57", "#A8BD3A", "27A0CC"], 6 | "legendLabels": ["data1longerlabeltest", "data2longerlabeltest", "data3"], 7 | "legendStyle": "rect", 8 | "sourceText": ["Office for National Statistics"], 9 | "draggable": false, 10 | "annotationsChart": [{ 11 | "xVal": "2003", 12 | "yVal": 900, 13 | "path": "", 14 | "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,", 15 | "textOffset": [ 16 | 0, 17 | 0 18 | ] 19 | } 20 | ], 21 | "wordwrap": [30, 20, 10], 22 | "annoAlign": ["middle", "middle", "end"], 23 | "annotationBullet": ["An annotation", "Another annotation"], 24 | "markers": false, 25 | "yAxisLabel": "yAxisUnit", 26 | "yAxisScale": "auto_zero_max", 27 | "ticksEvery":{ 28 | "sm":4, 29 | "md":2, 30 | "lg":2 31 | } 32 | }, 33 | "optional": { 34 | "margin": { 35 | "sm":{ 36 | "top":60, 37 | "right":50, 38 | "bottom":0, 39 | "left":40 40 | }, 41 | "md":{ 42 | "top":60, 43 | "right":50, 44 | "bottom":0, 45 | "left":40 46 | }, 47 | "lg":{ 48 | "top":60, 49 | "right":50, 50 | "bottom":0, 51 | "left":40 52 | } 53 | }, 54 | 55 | "aspectRatio": {"sm":[16, 13],"md":[16,12],"lg":[16,8]}, 56 | 57 | "mobileBreakpoint": 414, 58 | "midBreakpoint":600, 59 | 60 | "y_num_ticks": {"sm":6, "md":8, "lg":10}, 61 | "annotateLineX1_Y1_X2_Y2": [ 62 | [ 63 | ["2004", 900], 64 | ["2004", 0] 65 | ] 66 | ], 67 | "annotateRect": [{ 68 | "topLeft":["2004", 900], 69 | "bottomRight":["2007", 0], 70 | "fill":"#888", 71 | "opacity":0.5 72 | }], 73 | "centre_line": false, 74 | "centre_line_value": 100 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /all-templates/bar-and-line/css/styles.css: -------------------------------------------------------------------------------- 1 | .labels text { 2 | font-size: 12px; 3 | fill: #666666; 4 | } 5 | 6 | #xAxis text { 7 | font-size: 22px; 8 | fill: none; 9 | } 10 | 11 | #graphic .axis line { 12 | fill: none; 13 | shape-rendering: crispEdges; 14 | } 15 | 16 | #graphic .axis.x path { 17 | display: none; 18 | } 19 | 20 | .labels line { 21 | fill: none; 22 | stroke: #666; 23 | shape-rendering: crispEdges; 24 | } 25 | 26 | h6 { 27 | font-size: 16px; 28 | margin: 16px 0 8px 0; 29 | font-weight: 700; 30 | color: #323132; 31 | } -------------------------------------------------------------------------------- /all-templates/bar-and-line/data.csv: -------------------------------------------------------------------------------- 1 | date,data1longerlabeltest,data2longerlabeltest,data3 1990,597.92,809.41,728.469 1991,605.86,818.39,736.551 1992,589.86,797.24,717.516 1993,575.3,777.12,699.408 1994,570,766.17,689.553 1995,562.04,760.61,684.549 1996,582.99,781.96,703.764 1997,557.57,756.96,681.264 1998,560.57,753.7,678.33 1999,553.05,722.86,650.574 2000,559.47,722.83,650.547 2001,568.02,725.36,652.824 2002,550.41,704.18,633.762 2003,561.3,710.87,639.783 2004,561.47,705.82,635.238 2005,557.79,696.6,626.94 2006,555.64,690.1,621.09 2007,546.74,677.23,609.507 2008,532.88,657.13,591.417 2009,482.22,598.58,538.722 2010,500.75,613.33,551.997 2011,457.53,566.22,509.598 2012,476.26,582.21,523.989 2013,467.47,568.35,511.515 -------------------------------------------------------------------------------- /all-templates/bar-and-line/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/bar-and-line/fallback.png -------------------------------------------------------------------------------- /all-templates/bar-and-line/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bar and line chart 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

The chart below displays [description of what the chart shows for screen reader users]

20 | 21 |
22 |
23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /all-templates/bump-chart/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "useRanks":true, 5 | "timeFormat": "%Y", 6 | "timePeriods":[2014,2015,2016,2017,2018], 7 | "colour_palette": ["#003C57", "#0f8575"], 8 | "sourceText": ["Office for National Statistics"], 9 | "yAxisLabel":"Rank", 10 | "yAxisBreak":11, 11 | "yAxisBreakText":"Top 10 ▲" 12 | }, 13 | 14 | "optional": { 15 | "margin_sm": [50, 120, 20, 15], 16 | "margin_md": [50, 165, 20, 15], 17 | "margin_lg": [50, 165, 20, 15], 18 | 19 | "heightPer": { 20 | "sm": 45, 21 | "md": 35, 22 | "lg": 35 23 | }, 24 | 25 | "mobileBreakpoint": 414, 26 | "tabletBreakpoint": 576 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /all-templates/bump-chart/data.csv: -------------------------------------------------------------------------------- 1 | name,time1value,time2value,time3value,time4value,time5value,time1rank,time2rank,time3rank,time4rank,time5rank 2 | United States,4,3,1,1,1,4,3,1,1,1 3 | Hong Kong,3,4,3,2,2,3,4,3,2,2 4 | Netherlands,2,1,2,3,3,2,1,2,3,3 5 | Jersey,8,7,5,4,4,8,7,5,4,4 6 | Luxembourg,5,5,8,6,5,5,5,8,6,5 7 | Spain,6,6,25,5,6,6,6,13,5,6 8 | France,1,2,4,8,7,1,2,4,8,7 9 | Barbados,67,67,64,7,8,14,14,14,7,8 10 | Canada,12,12,10,11,9,13,13,10,12,9 11 | Japan,11,11,9,9,10,12,12,9,9,10 12 | Bermuda,9,9,7,10,11,9,9,7,10,12 13 | British Virgin Islands,10,10,12,15,15,10,10,12,13,13 14 | Germany,7,8,6,17,16,7,8,6,14,14 15 | -------------------------------------------------------------------------------- /all-templates/bump-chart/datadownload.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/bump-chart/datadownload.xlsx -------------------------------------------------------------------------------- /all-templates/bump-chart/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/bump-chart/fallback.png -------------------------------------------------------------------------------- /all-templates/bump-chart/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/bump-chart/image.png -------------------------------------------------------------------------------- /all-templates/circle-category/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | "colour": "#206095", 5 | "opacity": "0.8", 6 | "sourceText":["Office for National Statistics – Annual Population Survey 3-year pooled dataset 2015-17"], 7 | "xAxisLabel":"", 8 | "categoryHeight": { 9 | "small": 100, 10 | "medium": 50 11 | }, 12 | "timeFormat": "%d/%m/%Y", 13 | "xAxisTimeFormat": "%d %b %y", 14 | "scaleFactor": { 15 | "small":4.5, 16 | "medium":3 17 | }, 18 | "legendLabels":["Working for Self", "Partner", "Running a Business", "Sole Director of Own Limited Business", "Sub-contractor", "Free-lancer"], 19 | "colour_palette":["#206095", "#118C7B", "#003C57", "#A8BD3A", "27A0CC","#871A5B"] 20 | }, 21 | "optional" : { 22 | "margin": { 23 | "small": { 24 | "top": 170, 25 | "right": 60, 26 | "bottom": 0, 27 | "left": 50 28 | }, 29 | "medium": { 30 | "top": 100, 31 | "right": 55, 32 | "bottom": 0, 33 | "left": 300 34 | } 35 | }, 36 | "mobileBreakpoint" : 610, 37 | "tickDayInterval": 14 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /all-templates/circle-category/data.csv: -------------------------------------------------------------------------------- 1 | Date,Number,Category,Colour 2 | Top self-employment type,44,"Agriculture, forestry and fishing",Working for Self 3 | 2nd most common type,87,"Agriculture, forestry and fishing",Partner 4 | 3rd most common type,53,"Agriculture, forestry and fishing",Running a Business 5 | 2nd most common type,51,Energy and water,Sole Director of Own Limited Business 6 | Top self-employment type,53,Energy and water,Working for Self 7 | 3rd most common type,68,Energy and water,Sub-contractor 8 | 2nd most common type,3,Manufacturing,Sole Director of Own Limited Business 9 | 3rd most common type,43,Manufacturing,Running a Business 10 | Top self-employment type,94,Manufacturing,Working for Self 11 | 3rd most common type,79,Construction,Running a Business 12 | Top self-employment type,27,Construction,Working for Self 13 | 2nd most common type,77,Construction,Sub-contractor 14 | 2nd most common type,92,"Distribution, hotels and restaurants",Running a Business 15 | 3rd most common type,14,"Distribution, hotels and restaurants",Partner 16 | Top self-employment type,44,"Distribution, hotels and restaurants",Working for Self 17 | 2nd most common type,67,Transport and communication,Sole Director of Own Limited Business 18 | Top self-employment type,1,Transport and communication,Working for Self 19 | 3rd most common type,47,Transport and communication,Free-lancer 20 | 3rd most common type,69,Banking and finance,Sole Director of Own Limited Business 21 | 2nd most common type,69,Banking and finance,Running a Business 22 | Top self-employment type,39,Banking and finance,Working for Self 23 | 2nd most common type,67,"Public admin, education and health",Running a Business 24 | Top self-employment type,44,"Public admin, education and health",Working for Self 25 | 3rd most common type,92,"Public admin, education and health",Free-lancer 26 | 3rd most common type,40,Other services,Running a Business 27 | Top self-employment type,50,Other services,Working for Self 28 | 2nd most common type,77,Other services,Free-lancer 29 | -------------------------------------------------------------------------------- /all-templates/circle-category/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/circle-category/fallback.png -------------------------------------------------------------------------------- /all-templates/circle-timeline/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | "colour": "#244E6E", 5 | "opacity": "0.8", 6 | "sourceText":["Office for National Statistics – Annual Population Survey 3-year pooled dataset 2015-17"], 7 | "xAxisLabel":"", 8 | "categoryHeight": { 9 | "small": 80, 10 | "medium": 100 11 | }, 12 | "timeFormat": "%d/%m/%Y", 13 | "xAxisTimeFormat": "%d %b %y", 14 | "scaleFactor": 5, 15 | 16 | "keyVals": [2,3] 17 | }, 18 | "optional" : { 19 | "margin": { 20 | "small": { 21 | "top": 8, 22 | "right": 35, 23 | "bottom": 25, 24 | "left": 40 25 | }, 26 | "medium": { 27 | "top": 8, 28 | "right": 35, 29 | "bottom": 60, 30 | "left": 40 31 | } 32 | }, 33 | "mobileBreakpoint" : 610, 34 | "tickDayInterval": 14 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /all-templates/circle-timeline/data.csv: -------------------------------------------------------------------------------- 1 | Date,Number,Category 2 | 23/01/2020,3.1,BIG Earthquake 3 | 17/01/2020,1,Earthquake 4 | 15/01/2020,1.9,Earthquake 5 | 11/01/2020,0.9,Earthquake 6 | 07/01/2020,2.3,Earthquake 7 | 06/01/2020,1.8,Earthquake 8 | 04/01/2020,0.9,Earthquake 9 | 04/01/2020,0.9,Earthquake 10 | 03/01/2020,1.8,Earthquake 11 | 31/12/2019,0.8,Earthquake 12 | 28/12/2019,2,Earthquake 13 | 25/12/2019,0.8,Earthquake 14 | 24/12/2019,0.9,Earthquake 15 | 23/12/2019,1.5,Earthquake 16 | 23/12/2019,0.9,Earthquake 17 | 23/12/2019,0.7,Earthquake 18 | 22/12/2019,0.8,Earthquake 19 | 20/12/2019,1.1,Earthquake 20 | 18/12/2019,1.5,Earthquake 21 | 18/12/2019,1.7,Earthquake 22 | 16/12/2019,1.6,Earthquake 23 | 15/12/2019,2.1,Earthquake 24 | 14/12/2019,1.3,Earthquake 25 | 13/12/2019,1.3,Earthquake 26 | 11/12/2019,0.9,Earthquake 27 | 08/12/2019,2.9,Earthquake 28 | 06/12/2019,1.4,Earthquake 29 | 05/12/2019,3.2,BIG Earthquake 30 | 03/01/2020,2.4,Volcano 31 | -------------------------------------------------------------------------------- /all-templates/circle-timeline/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/circle-timeline/fallback.png -------------------------------------------------------------------------------- /all-templates/clustered-bar-horizontal/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | 4 | "GraphType" : "clusterBar" , 5 | "graphic_data_url": "data.csv", 6 | "colour_palette": ["#206095", "#118C7B", "#003C57", "#A8BD3A", "27A0CC"], 7 | "dateFormat":"%Y-%y", 8 | "legendLabels" :[ "Education for under-fives" , "Primary education" , "Secondary education" , "Tertiary education" ], 9 | "legendStyle": "rect", 10 | "sourceText":["Source information"], 11 | "sourceURL":["http://www.ons.gov.uk/ons"], 12 | 13 | "annotationChart": [ 14 | "The proportion of spending on each education category has remained broadly stable over the past five years", 15 | "Annotation 2" 16 | ], 17 | "annotationBullet": [ 18 | "annotationBullet1", 19 | "Annotation 2" 20 | ], 21 | "annotationXY":[ 22 | [30, "2013-14"], 23 | [5, "2011-12"] 24 | ], 25 | "annotationAlign":[ 26 | "start", 27 | "start" 28 | ], 29 | 30 | "circles" : false, 31 | "annotationCXCY":[ 32 | ["38.4","2010-11"], 33 | ["23","2012-13"] 34 | ], 35 | 36 | "xAxisLabel":"%", 37 | "xAxisScale":[0,50], 38 | "barHeight_sm_md_lg" : [60,70,80] 39 | 40 | }, 41 | "optional" : { 42 | "margin_sm": [40, 10, 35, 60], 43 | "margin_md": [20, 10, 55, 60], 44 | "margin_lg": [20, 10, 65, 60], 45 | 46 | "aspectRatio_sm" : [16,13], 47 | "aspectRatio_md" : [16,12], 48 | "aspectRatio_lg" : [16,10], 49 | 50 | "mobileBreakpoint" : 610, 51 | 52 | "xAxisTextFormat_sm_md_lg" : ["%Y-%y", "%Y-%y", "%Y-%y"], 53 | 54 | "x_num_ticks_sm_md_lg" : [7,17,17], 55 | "y_num_ticks_sm_md_lg" : [6,8,10], 56 | "centre_line" : true, 57 | "centre_line_value" : 10 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /all-templates/clustered-bar-horizontal/data.csv: -------------------------------------------------------------------------------- 1 | state,Education for under-fives,Primary education,Secondary education,Tertiary education 2009-10,5.469915465,28.47407441,40.69097238,14.89421816 2010-11,5.301697286,28.20249402,40.21027552,17.24936885 2011-12,5.345408932,29.83071913,41.47899237,15.06956512 2012-13,5.809863203,29.62639384,41.65651224,15.54201632 2013-14,5.792635616,30.00509876,39.95322441,17.02099359 -------------------------------------------------------------------------------- /all-templates/clustered-bar-horizontal/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/clustered-bar-horizontal/fallback.png -------------------------------------------------------------------------------- /all-templates/clustered-bar-vertical/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | 4 | "GraphType" : "clusterBar" , 5 | 6 | "graphic_data_url": "data.csv", 7 | 8 | "colour_palette": ["#206095", "#118C7B", "#003C57", "#A8BD3A", "27A0CC"], 9 | 10 | "dateFormat":"%Y-%y", 11 | 12 | "legendLabels" :[ "Education for under-fives" , "Primary education" , "Secondary education" , "Tertiary education" ], 13 | "legendStyle": "rect", 14 | "sourceText":["Source information"], 15 | "sourceURL":["http://www.ons.gov.uk/ons"], 16 | 17 | "annotationChart": [ 18 | "The proportion of spending on each education category has remained broadly stable over the past five years" 19 | ], 20 | "annotationBullet": [ 21 | "annotationBullet1" 22 | ], 23 | "annotationXY":[ 24 | ["2012-13",50] 25 | ], 26 | "annotationAlign":[ 27 | "start" 28 | ], 29 | 30 | 31 | 32 | "yAxisLabel":"%", 33 | "yAxisScale":[0,50], 34 | "yAxisBreak_sm_md_lg": [65,65,65] 35 | 36 | }, 37 | "optional" : { 38 | "margin_sm": [50, 10, 35, 30], 39 | "margin_md": [50, 10, 35, 30], 40 | "margin_lg": [40, 10, 55, 30], 41 | 42 | "aspectRatio_sm" : [16,13], 43 | "aspectRatio_md" : [16,12], 44 | "aspectRatio_lg" : [16,10], 45 | 46 | "mobileBreakpoint" : 610, 47 | 48 | "xAxisTextFormat_sm_md_lg" : ["%Y-%y", "%Y-%y", "%Y-%y"], 49 | 50 | "x_num_ticks_sm_md_lg" : [7,17,17], 51 | "y_num_ticks_sm_md_lg" : [6,8,10], 52 | "vertical_line" : true, 53 | "annotateLineX1_Y1_X2_Y2":[ 54 | [["2010-11",50],["2010-11",0]], 55 | [["2013-14",50],["2013-14",0]] 56 | ], 57 | "annotateRect" : true, 58 | "annotateRectX_Y" : [ 59 | [["2010-11", 50],["2012-13", 0]], 60 | [["2009-10", 50],["2010-11", 0]] 61 | ], 62 | "lineColor_opcty" : [["#888", 0.2], ["red", 0.2]], 63 | "centre_line" : false, 64 | "centre_line_value" : 0 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /all-templates/clustered-bar-vertical/data.csv: -------------------------------------------------------------------------------- 1 | state,Education for under-fives,Primary education,Secondary education,Tertiary education 2009-10,5.469915465,28.47407441,40.69097238,14.89421816 2010-11,5.301697286,28.20249402,40.21027552,17.24936885 2011-12,5.345408932,29.83071913,41.47899237,15.06956512 2012-13,5.809863203,29.62639384,41.65651224,15.54201632 2013-14,5.792635616,30.00509876,39.95322441,17.02099359 -------------------------------------------------------------------------------- /all-templates/clustered-bar-vertical/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/clustered-bar-vertical/fallback.png -------------------------------------------------------------------------------- /all-templates/dot-plot-jiggle/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "legendLabels": ["16 to 29", "30 to 49", "50 to 69"], 5 | "colour_palette": ["#27A0CC","#206095","#002B3F"], 6 | "sourceText": ["Office for National Statistics - Opinions and Lifestyle Survey (COVID-19 module)"], 7 | 8 | "annotationChart": [ 9 | ], 10 | "annotationBullet": [], 11 | "annotationXY": [ 12 | ["20", "London"], 13 | ["60", "North East"] 14 | ], 15 | "annotationAlign": [ 16 | "middle", 17 | "middle" 18 | ], 19 | "minmaxonly": false, 20 | "arrows": null, 21 | "tooltip": false, 22 | "xAxisLabel": "Percentage points", 23 | "yAxisLabel": "", 24 | "xAxisScale": [-50,50], 25 | "dotsize": 6, 26 | "dot_shift": 5, 27 | 28 | "heightper": 40 29 | }, 30 | "optional": { 31 | "margin": { 32 | "sm": { 33 | "top": 35, 34 | "right": 158, 35 | "bottom": 0, 36 | "left": 0 37 | }, 38 | "md": { 39 | "top": 30, 40 | "right": 158, 41 | "bottom": 0, 42 | "left": 162 43 | }, 44 | "lg": { 45 | "top": 25, 46 | "right": 158, 47 | "bottom": 0, 48 | "left": 162 49 | } 50 | }, 51 | 52 | "aspectRatio": { 53 | "sm": [4, 6], 54 | "md": [3, 3], 55 | "lg": [16, 10] 56 | }, 57 | 58 | "mobileBreakpoint": 440, 59 | "middleBreakpoint": 600, 60 | "x_num_ticks": { 61 | "sm": 6, 62 | "md": 4, 63 | "lg": 10 64 | }, 65 | 66 | "centre_line": true, 67 | "centre_line_value": 0 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /all-templates/dot-plot-jiggle/data.csv: -------------------------------------------------------------------------------- 1 | nameLeftwards,nameRightwards,name,imin,imax,median 2 | Reduced work life balance,Improved work life balance,Improved work life balance,36,46,48 3 | Slower to complete work,Quicker to complete work,Quicker to complete work,19,24,26 4 | Reduced wellbeing,Improved wellbeing ,Improved wellbeing,15,14,15 5 | More distractions,Fewer distractions,Fewer distractions,-10,14,27 6 | Harder to think of new ideas,Easier to think of new ideas,Easier to think of new ideas,-7,-2,1 7 | Fewer job opportunities,More job opportunities,More job opportunities,-12,-6,-5 8 | Harder to work with others,Easier to work with others,Easier to work with others,-45,-34,-27 9 | -------------------------------------------------------------------------------- /all-templates/dot-plot-jiggle/datadownload.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/dot-plot-jiggle/datadownload.xlsx -------------------------------------------------------------------------------- /all-templates/dot-plot-jiggle/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/dot-plot-jiggle/fallback.png -------------------------------------------------------------------------------- /all-templates/heatmap/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | "sourceText":"Office for National Statistics – Annual Population Survey 3-year pooled dataset 2015-17", 5 | "breaks":"jenks", 6 | "colour_palette":"GnBu", 7 | "numberBreaks":5 8 | }, 9 | "optional" : { 10 | "margin": { 11 | "sm": { 12 | "top": 25, 13 | "right": 10, 14 | "bottom": 10, 15 | "left": 200 16 | }, 17 | "md": { 18 | "top": 25, 19 | "right": 10, 20 | "bottom": 10, 21 | "left": 150 22 | }, 23 | "lg": { 24 | "top": 25, 25 | "right": 10, 26 | "bottom": 10, 27 | "left": 165 28 | } 29 | }, 30 | "aspectRatio": { 31 | "sm": [16, 16], 32 | "md": [16, 16], 33 | "lg": [16, 16] 34 | }, 35 | 36 | "middleBreakpoint": 550, 37 | "mobileBreakpoint" : 414 38 | 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /all-templates/heatmap/data.csv: -------------------------------------------------------------------------------- 1 | yvals,NE,NW,YH,EM,WM,EE,LN,SE,SW,WA,SC 2 | "Manufacturing, maintenance & repair",9.1,19.5,5.1,5,5,5.1,6.3,30.4,6.6,2.9,4.9 3 | Construction,12.3,6.2,6.9,3.6,4.3,5.1,23.2,16.5,5.2,0.9,15.9 4 | Charges for intellectual property,1.4,9.6,1.9,1.5,1.5,9.8,52,16,2.9,2.1,1.4 5 | "Telecom, computer, and info services and a really really really long name",1,3.3,2.7,2.9,4.1,4.1,49.7,23.3,4.9,0.6,3.4 6 | Research and development services,1.4,3.7,2.4,6.6,2.7,18.4,13.2,41.4,3.1,1.4,5.9 7 | Professional & management consulting and a super super super extraordinary unbelieveable really really really long this-is-taking-the-micky now long name,1,4.4,2,2.3,2.3,4.4,62.3,13.5,3,1.4,3.3 8 | Technical services,1.1,6,1.8,1.9,1.8,5,13.6,32.2,12,6.4,18.1 9 | -------------------------------------------------------------------------------- /all-templates/heatmap/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/heatmap/fallback.png -------------------------------------------------------------------------------- /all-templates/histogram-double/config.js: -------------------------------------------------------------------------------- 1 | var dvc = { 2 | "essential": { 3 | //data to use for chart 4 | "graphic_data_url": "data.csv", 5 | //chart colour 6 | "colour_palette": ["rgba(32, 96, 149, 0.7)"], 7 | "negative_colour": ["rgba(243, 148, 49, 0.7)"], 8 | "stroke_colour": ["#206095"], 9 | "negative_stroke": ["#a66521"], 10 | //x values are not loaded as dates but option to do so exists below 11 | //"dateFormat":"%Y", 12 | //Set alternative screenreader text if more detail than default is needed 13 | "screenreadertext": "", 14 | //Source 15 | "sourceText": ["Office for National Statistics"], 16 | //desktop annotations (double space for new line) 17 | "annotationChart": [ 18 | "This is a double histogram" 19 | ], 20 | // mobile annotations 21 | "annotationBullet": [ 22 | "This is a double histogram" 23 | ], 24 | //position of annotaions specified using x, y values 25 | "annotationXY": [ 26 | ["210", "450000"] 27 | ], 28 | //annotation alignment (start, middle or end) 29 | "annotationAlign": [ 30 | "middle" 31 | ], 32 | //legend labels 33 | "legendLabels": ["VAT", "PAYE"], 34 | //axis labels 35 | "yAxisLabel": "Y-label", 36 | "xAxisLabel": "X-label", 37 | //y axis scale ("auto_zero_max", "auto_min_max" or custom e.g. [-3,5]) 38 | "yAxisScale": [0, 500000], 39 | //set y axis break to true if y axis dosen't start at 0 and doesn't contain negative values 40 | //this enables the x axis to be dropped 41 | //x axis scale 42 | "xAxisScale": [-100, 750], 43 | "yAxisBreak": false, 44 | //specifies position of "break" icon 45 | "yAxisBreak_sm_md_lg": [5, 5, 5] 46 | }, 47 | "optional": { 48 | //specifies margins at different window sizes 49 | "margin_sm": [20, 10, 55, 55], 50 | "margin_md": [25, 10, 45, 55], 51 | "margin_lg": [25, 10, 45, 55], 52 | //specifies aspect ratio of chart at different window sizes 53 | "aspectRatio_sm": [16, 13], 54 | "aspectRatio_md": [16, 12], 55 | "aspectRatio_lg": [16, 10], 56 | //specifies smallest breakpoint (for mobile users) 57 | "mobileBreakpoint": 610, 58 | //specified the number of ticks required on the y axis at different window sizes 59 | "y_num_ticks_sm_md_lg": [5, 5, 5], 60 | //draws vertical_lines if required for annotations (set to true or false) 61 | "vertical_line": false, 62 | //define start and end points of any annotation lines 63 | "annotateLineX1_Y1_X2_Y2": [ 64 | ], 65 | //draws rectangles if required for annotations (set to true or false) 66 | "annotateRect": false, 67 | //define start and end points of rectangles 68 | "annotateRectX_Y": [ 69 | [["1990", 6], ["1993", -3]], 70 | [["1999", 6], ["2001", -3]] 71 | ], 72 | //defines colour and opacity of rectangles 73 | "rectStyle": [ 74 | ], 75 | //draws a line with a heavier stroke, used if the x axis is dropped or the data has negative and positive values 76 | "centre_line": false, 77 | "centre_line_value": 0 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /all-templates/histogram-double/data.csv: -------------------------------------------------------------------------------- 1 | from,to,count,count2 2 | -90,-81,1230,0 3 | -81,-73,1701,0 4 | -73,-65,2089,0 5 | -65,-57,2708,0 6 | -57,-49,4562,0 7 | -49,-40,9190,0 8 | -40,-32,11972,0 9 | -32,-24,24274,1 10 | -24,-16,49181,0 11 | -16,-8,85209,4 12 | -8,0,164181,3944 13 | 0,8,479250,15 14 | 8,16,320699,317 15 | 16,24,220314,6205 16 | 24,32,163800,17378 17 | 32,41,140080,32103 18 | 41,49,89498,57794 19 | 49,57,66627,64211 20 | 57,65,53073,62876 21 | 65,74,43567,89999 22 | 74,82,41044,85628 23 | 82,90,30490,54356 24 | 90,98,26347,60783 25 | 98,106,22459,81641 26 | 106,114,18796,78578 27 | 114,123,16959,56302 28 | 123,131,13819,62175 29 | 131,139,12288,63386 30 | 139,147,10382,47916 31 | 147,155,9312,39769 32 | 155,164,9949,39012 33 | 164,172,7514,29255 34 | 172,180,6637,19471 35 | 180,188,6528,11536 36 | 188,197,5611,14538 37 | 197,205,5835,25672 38 | 205,213,4414,13531 39 | 213,221,4240,10191 40 | 221,229,3939,17777 41 | 229,238,3614,12231 42 | 238,246,3803,8092 43 | 246,254,3063,7674 44 | 254,262,3009,9374 45 | 262,270,2678,6712 46 | 270,278,2751,5247 47 | 278,287,2897,6609 48 | 287,295,2511,7906 49 | 295,303,2240,5476 50 | 303,311,2195,4501 51 | 311,319,2089,5867 52 | 319,328,2229,12612 53 | 328,336,1882,4841 54 | 336,344,1875,5493 55 | 344,352,1869,12943 56 | 352,360,1759,5050 57 | 360,369,2364,4251 58 | 369,377,2323,3793 59 | 377,385,1819,4759 60 | 385,393,1611,3870 61 | 393,401,1498,3106 62 | 401,410,1587,6977 63 | 410,418,1288,7047 64 | 418,426,1194,5277 65 | 426,434,1190,6798 66 | 434,443,1100,8208 67 | 443,451,1100,6119 68 | 451,459,975,1903 69 | 459,467,1012,2576 70 | 467,475,942,2936 71 | 475,484,866,1946 72 | 484,492,988,1962 73 | 492,500,831,5136 74 | 500,508,772,5398 75 | 508,516,793,2337 76 | 516,525,793,5601 77 | 525,533,837,5102 78 | 533,541,635,1434 79 | 541,549,693,1037 80 | 549,557,638,930 81 | 557,566,648,1487 82 | 566,574,666,1630 83 | 574,582,599,941 84 | 582,590,569,1546 85 | 590,598,581,2542 86 | 598,606,525,954 87 | 606,615,559,753 88 | 615,623,496,735 89 | 623,631,538,796 90 | 631,639,446,664 91 | 639,647,563,536 92 | 647,656,555,882 93 | 656,664,487,670 94 | 664,672,420,579 95 | 672,680,411,688 96 | 680,688,383,851 97 | 688,697,443,1147 98 | 697,705,376,557 99 | 705,713,376,964 100 | 713,721,366,1881 101 | 721,730,390,691 102 | -------------------------------------------------------------------------------- /all-templates/histogram-double/datadownload.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/histogram-double/datadownload.xlsx -------------------------------------------------------------------------------- /all-templates/histogram-double/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/histogram-double/fallback.png -------------------------------------------------------------------------------- /all-templates/histogram/config.js: -------------------------------------------------------------------------------- 1 | var dvc = { 2 | "essential": { 3 | //data to use for chart 4 | "graphic_data_url": "data.csv", 5 | //chart colour 6 | "colour_palette": ["rgba(32, 96, 149, 1)"], 7 | "stroke_colour": ["#206095"], 8 | //x values are not loaded as dates but option to do so exists below 9 | //"dateFormat":"%Y", 10 | //Set alternative screenreader text if more detail than default is needed 11 | "screenreadertext": "", 12 | //Source 13 | "sourceText": ["Office for National Statistics"], 14 | //desktop annotations (double space for new line) 15 | "annotationChart": [ 16 | "This is a histogram" 17 | ], 18 | // mobile annotations 19 | "annotationBullet": [ 20 | "This is a histogram" 21 | ], 22 | //position of annotaions specified using x, y values 23 | "annotationXY": [ 24 | ["210","450000"] 25 | ], 26 | //annotation alignment (start, middle or end) 27 | "annotationAlign": [ 28 | "middle" 29 | ], 30 | //axis labels 31 | "yAxisLabel": "Y-label", 32 | "xAxisLabel": "X-label", 33 | //y axis scale ("auto_zero_max", "auto_min_max" or custom e.g. [-3,5]) 34 | "yAxisScale": [0, 500000], 35 | //set y axis break to true if y axis dosen't start at 0 and doesn't contain negative values 36 | //this enables the x axis to be dropped 37 | //x axis scale 38 | "xAxisScale": [-100, 750], 39 | "yAxisBreak": false, 40 | //specifies position of "break" icon 41 | "yAxisBreak_sm_md_lg": [5, 5, 5] 42 | }, 43 | "optional": { 44 | //specifies margins at different window sizes 45 | "margin_sm": [25, 10, 20, 55], 46 | "margin_md": [25, 10, 20, 55], 47 | "margin_lg": [25, 10, 20, 55], 48 | //specifies aspect ratio of chart at different window sizes 49 | "aspectRatio_sm": [16, 16], 50 | "aspectRatio_md": [16, 12], 51 | "aspectRatio_lg": [16, 10], 52 | //specifies smallest breakpoint (for mobile users) 53 | "mobileBreakpoint": 610, 54 | //specified the number of ticks required on the y axis at different window sizes 55 | "y_num_ticks_sm_md_lg": [5, 5, 5], 56 | //draws vertical_lines if required for annotations (set to true or false) 57 | "vertical_line": false, 58 | //define start and end points of any annotation lines 59 | "annotateLineX1_Y1_X2_Y2": [ 60 | ], 61 | //draws rectangles if required for annotations (set to true or false) 62 | "annotateRect": false, 63 | //define start and end points of rectangles 64 | "annotateRectX_Y": [ 65 | ], 66 | //defines colour and opacity of rectangles 67 | "rectStyle": [ 68 | ], 69 | //draws a line with a heavier stroke, used if the x axis is dropped or the data has negative and positive values 70 | "centre_line": false, 71 | "centre_line_value": 0 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /all-templates/histogram/data.csv: -------------------------------------------------------------------------------- 1 | from,to,count 2 | -90,-81,1230 3 | -81,-73,1647 4 | -73,-65,2360 5 | -65,-57,2469 6 | -57,-49,3875 7 | -49,-40,7643 8 | -40,-32,9816 9 | -32,-24,19140 10 | -24,-16,38338 11 | -16,-8,68535 12 | -8,0,140100 13 | 0,8,463420 14 | 8,16,312804 15 | 16,24,226330 16 | 24,32,183819 17 | 32,41,178701 18 | 41,49,155230 19 | 49,57,138441 20 | 57,65,123470 21 | 65,74,141673 22 | 74,82,135757 23 | 82,90,90863 24 | 90,98,93265 25 | 98,106,110773 26 | 106,114,104126 27 | 114,123,79199 28 | 123,131,81829 29 | 131,139,80753 30 | 139,147,62843 31 | 147,155,53035 32 | 155,164,53383 33 | 164,172,40612 34 | 172,180,29316 35 | 180,188,20645 36 | 188,197,22691 37 | 197,205,34781 38 | 205,213,20372 39 | 213,221,16572 40 | 221,229,24216 41 | 229,238,18217 42 | 238,246,14073 43 | 246,254,12700 44 | 254,262,14379 45 | 262,270,11234 46 | 270,278,9916 47 | 278,287,11507 48 | 287,295,12309 49 | 295,303,9503 50 | 303,311,8325 51 | 311,319,9631 52 | 319,328,16913 53 | 328,336,8364 54 | 336,344,8973 55 | 344,352,16632 56 | 352,360,8402 57 | 360,369,8426 58 | 369,377,7613 59 | 377,385,7846 60 | 385,393,6833 61 | 393,401,5712 62 | 401,410,9792 63 | 410,418,9548 64 | 418,426,7592 65 | 426,434,8993 66 | 434,443,10307 67 | 443,451,8438 68 | 451,459,3803 69 | 459,467,4379 70 | 467,475,4695 71 | 475,484,3577 72 | 484,492,3843 73 | 492,500,6685 74 | 500,508,6988 75 | 508,516,3858 76 | 516,525,7001 77 | 525,533,6762 78 | 533,541,2815 79 | 541,549,2395 80 | 549,557,2138 81 | 557,566,2766 82 | 566,574,2938 83 | 574,582,2145 84 | 582,590,2677 85 | 590,598,3767 86 | 598,606,2069 87 | 606,615,1834 88 | 615,623,1719 89 | 623,631,1907 90 | 631,639,1667 91 | 639,647,1629 92 | 647,656,2049 93 | 656,664,1648 94 | 664,672,1511 95 | 672,680,1572 96 | 680,688,1728 97 | 688,697,2109 98 | 697,705,1416 99 | 705,713,1779 100 | 713,721,2707 101 | 721,730,1584 102 | -------------------------------------------------------------------------------- /all-templates/histogram/datadownload.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/histogram/datadownload.xlsx -------------------------------------------------------------------------------- /all-templates/histogram/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/histogram/fallback.png -------------------------------------------------------------------------------- /all-templates/icon-array/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "dateFormat": "%d/%m/%Y", 5 | "colour_palette": ["#206095", "#118C7B", "#003C57", "#A8BD3A", "27A0CC"], 6 | "sourceText": ["Office for National Statistics"], 7 | "gridWidth":"16", 8 | "gridHeight":"6", 9 | "widthFirst":false, 10 | "dotRadius":5 11 | }, 12 | 13 | "optional": { 14 | "margin_sm": [80, 10, 70, 30], 15 | "margin_md": [50, 10, 70, 30], 16 | "margin_lg": [50, 10, 70, 30], 17 | 18 | "aspectRatio_sm": [16, 13], 19 | "aspectRatio_md": [16, 12], 20 | "aspectRatio_lg": [16, 10], 21 | 22 | "mobileBreakpoint": 610 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /all-templates/icon-array/data.csv: -------------------------------------------------------------------------------- 1 | group,value 2 | State pension,91.6 3 | Benefits,66.4 4 | Tax credits,27.4 5 | Pension credit,5.7 6 | Jobseekers allowance,1.9 7 | Other,23.9 -------------------------------------------------------------------------------- /all-templates/icon-array/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/icon-array/fallback.png -------------------------------------------------------------------------------- /all-templates/images/caret-down-solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 10 | 11 | -------------------------------------------------------------------------------- /all-templates/images/chosen-sprite-grey@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/images/chosen-sprite-grey@2x.jpg -------------------------------------------------------------------------------- /all-templates/images/chosen-sprite-white@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/images/chosen-sprite-white@2x.png -------------------------------------------------------------------------------- /all-templates/images/chosen-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/images/chosen-sprite.png -------------------------------------------------------------------------------- /all-templates/images/chosen-sprite@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/images/chosen-sprite@2x.png -------------------------------------------------------------------------------- /all-templates/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 | -------------------------------------------------------------------------------- /all-templates/images/x_close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /all-templates/images/x_close_slate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /all-templates/lib-sc/chosen-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/lib-sc/chosen-sprite.png -------------------------------------------------------------------------------- /all-templates/lib-sc/chosen-sprite@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/lib-sc/chosen-sprite@2x.png -------------------------------------------------------------------------------- /all-templates/lib-sc/d3-selection-multi.v1.min.js: -------------------------------------------------------------------------------- 1 | // https://github.com/d3/d3-selection-multi Version 1.0.1. Copyright 2017 Mike Bostock. 2 | !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("d3-selection"),require("d3-transition")):"function"==typeof define&&define.amd?define(["d3-selection","d3-transition"],n):n(t.d3,t.d3)}(this,function(t,n){"use strict";function r(n,r){return n.each(function(){var n=r.apply(this,arguments),e=t.select(this);for(var i in n)e.attr(i,n[i])})}function e(t,n){for(var r in n)t.attr(r,n[r]);return t}function i(n,r,e){return n.each(function(){var n=r.apply(this,arguments),i=t.select(this);for(var o in n)i.style(o,n[o],e)})}function o(t,n,r){for(var e in n)t.style(e,n[e],r);return t}function f(n,r){return n.each(function(){var n=r.apply(this,arguments),e=t.select(this);for(var i in n)e.property(i,n[i])})}function u(t,n){for(var r in n)t.property(r,n[r]);return t}function s(n,r){return n.each(function(){var e=r.apply(this,arguments),i=t.select(this).transition(n);for(var o in e)i.attr(o,e[o])})}function c(t,n){for(var r in n)t.attr(r,n[r]);return t}function a(n,r,e){return n.each(function(){var i=r.apply(this,arguments),o=t.select(this).transition(n);for(var f in i)o.style(f,i[f],e)})}function p(t,n,r){for(var e in n)t.style(e,n[e],r);return t}var l=function(t){return("function"==typeof t?r:e)(this,t)},y=function(t,n){return("function"==typeof t?i:o)(this,t,null==n?"":n)},h=function(t){return("function"==typeof t?f:u)(this,t)},v=function(t){return("function"==typeof t?s:c)(this,t)},d=function(t,n){return("function"==typeof t?a:p)(this,t,null==n?"":n)};t.selection.prototype.attrs=l,t.selection.prototype.styles=y,t.selection.prototype.properties=h,n.transition.prototype.attrs=v,n.transition.prototype.styles=d}); -------------------------------------------------------------------------------- /all-templates/lib-sc/modernizr.svg.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.7.1 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-svg 3 | */ 4 | ;window.Modernizr=function(a,b,c){function u(a){i.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.7.1",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l={svg:"http://www.w3.org/2000/svg"},m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.svg=function(){return!!b.createElementNS&&!!b.createElementNS(l.svg,"svg").createSVGRect};for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},u(""),h=j=null,e._version=d,e}(this,this.document); -------------------------------------------------------------------------------- /all-templates/lib-sc/queue.js: -------------------------------------------------------------------------------- 1 | !function(){function n(n){function e(){for(;i=ap;){var u=a++,e=c[u],o=t.call(e,1);o.push(l(u)),++p,e[0].apply(null,o)}}function l(n){return function(u,t){--p,null==s&&(null!=u?(s=u,a=d=0/0,o()):(c[n]=t,--d?i||e():o()))}}function o(){null!=s?m(s):f?m(s,c):m.apply(null,[s].concat(c))}var r,i,f,c=[],a=0,p=0,d=0,s=null,m=u;return n||(n=1/0),r={defer:function(){return s||(c.push(arguments),++d,e()),r},await:function(n){return m=n,f=!1,d||o(),r},awaitAll:function(n){return m=n,f=!0,d||o(),r}}}function u(){}var t=[].slice;n.version="1.0.7","function"==typeof define&&define.amd?define(function(){return n}):"object"==typeof module&&module.exports?module.exports=n:this.queue=n}(); -------------------------------------------------------------------------------- /all-templates/lib-sc/tabstyles.css: -------------------------------------------------------------------------------- 1 | /* Individual tab styles */ 2 | 3 | 4 | /*****************************/ 5 | /* Falling Icon, from http://vintageproductions.eu/grid/interactivity/ */ 6 | /*****************************/ 7 | 8 | .tabs-style-iconfall { 9 | overflow: visible; 10 | } 11 | 12 | .tabs-style-iconfall nav a { 13 | display: inline-block; 14 | overflow: visible; 15 | color: #74777b; 16 | /* padding-left: 29%; 17 | padding-right: 29%;*/ 18 | /* line-height: 1;*/ 19 | height: 46px; 20 | /* -webkit-transition: color 0.3s cubic-bezier(0.7,0,0.3,1); 21 | transition: color 0.3s cubic-bezier(0.7,0,0.3,1);*/ 22 | } 23 | 24 | /*.tabs-style-iconfall nav a:hover, 25 | .tabs-style-iconfall nav a:focus, 26 | .tabs-style-iconfall nav li.tab-current a { 27 | color: #1586CE; 28 | }*/ 29 | 30 | .tabs-style-iconfall nav a span { 31 | font-weight: 700; 32 | } 33 | 34 | /*.tabs-style-iconfall nav li::before { 35 | position: absolute; 36 | bottom: 1em; 37 | left: 50%; 38 | margin-left: -20px; 39 | width: 40px; 40 | height: 4px; 41 | background-color: #000; 42 | -webkit-transition: -webkit-transform 0.2s ease-in; 43 | transition: transform 0.2s ease-in; 44 | -webkit-transform: scale3d(0,1,1); 45 | transform: scale3d(0,1,1); 46 | }*/ 47 | 48 | .tabs-style-iconfall nav li.tab-current::before { 49 | opacity: 1; 50 | /* -webkit-transform: scale3d(1,1,1); 51 | transform: scale3d(1,1,1);*/ 52 | } 53 | 54 | .tabs-style-iconfall .icon::before { 55 | display: block; 56 | /* margin: 0 0 0.35em;*/ 57 | /* opacity: 0;*/ 58 | /* -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; 59 | transition: transform 0.2s, opacity 0.2s;*/ 60 | -webkit-transform: translate3d(0,-100px,0); 61 | transform: translate3d(0,-100px,0); 62 | pointer-events: none; 63 | } 64 | 65 | .tabs-style-iconfall nav li.tab-current .icon::before { 66 | opacity: 1; 67 | -webkit-transform: translate3d(0,0,0); 68 | transform: translate3d(0,0,0); 69 | } 70 | 71 | @media screen and (max-width: 58em) { 72 | .tabs-style-iconfall nav li .icon::before { 73 | opacity: 1; 74 | -webkit-transform: translate3d(0,0,0); 75 | transform: translate3d(0,0,0); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /all-templates/line-ordinal-band/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "reference": "m+sd", 5 | "comparison": "m-sd", 6 | "dateFormat": "%d/%m/%Y", 7 | "legendLabels": ["Deaths this year", "Normal range for the last 5 years"], 8 | "colour_palette": ["#206095", "#dadada","#dadada"], 9 | "legendStyle": ["line", "rect"], 10 | "plotLines": [{ 11 | "key": "2020", 12 | "colour": "#206095" 13 | }, { 14 | "key": "mean", 15 | "colour": "#dadada" 16 | }], 17 | "directLabels": [{ 18 | "variable": "mean", 19 | "label": "Normal range for past 5 years" 20 | }, 21 | { 22 | "variable": 2020, 23 | "label": 2020 24 | } 25 | ], 26 | "sourceText": ["Office for National Statistics"], 27 | "circles": false, 28 | "yAxisLabel": "Weekly deaths", 29 | "xAxisLabel": "Week number", 30 | "yAxisScale": [0, 25000], 31 | "yAxisBreak": false, 32 | "yAxisBreakValue": { 33 | "sm": 12, 34 | "md": 10, 35 | "lg": 10 36 | } 37 | }, 38 | 39 | "optional": { 40 | "margin": { 41 | "sm": { 42 | "top": 80, 43 | "right": 15, 44 | "bottom": 50, 45 | "left": 40 46 | }, 47 | "md": { 48 | "top": 30, 49 | "right": 100, 50 | "bottom": 50, 51 | "left": 40 52 | }, 53 | "lg": { 54 | "top": 30, 55 | "right": 120, 56 | "bottom": 50, 57 | "left": 40 58 | } 59 | }, 60 | 61 | "aspectRatio": { 62 | "sm": [16, 8], 63 | "md": [16, 8], 64 | "lg": [16, 8] 65 | }, 66 | 67 | "mobileBreakpoint": 414, 68 | "middleBreakpoint": 600, 69 | 70 | "x_ticks_every": { 71 | "sm": 2, 72 | "md": 1, 73 | "lg": 1 74 | }, 75 | "y_num_ticks": { 76 | "sm": 5, 77 | "md": 5, 78 | "lg": 5 79 | }, 80 | 81 | "lineMarkers": false 82 | 83 | 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /all-templates/line-ordinal-band/data.csv: -------------------------------------------------------------------------------- 1 | date,mean,m+sd,m-sd,2020 2 | 1,11075.4,13175.66767,8975.132327,12254 3 | 2,14108.4,15586.77472,12630.02528,14058 4 | 3,13199,14670.12049,11727.87951,12990 5 | 4,12776.4,13934.98224,11617.81776,11856 6 | 5,12249.4,13147.79986,11351.00014,11612 7 | 6,11887,12449.48956,11324.51044,10986 8 | 7,11728.6,12113.63026,11343.56974,10944 9 | 8,11436.4,12023.90345,10848.89655,10841 10 | 9,11120.6,11357.61751,10883.58249,10816 11 | 10,11538.2,12370.50595,10705.89405,10895 12 | 11,11189.4,12083.90059,10294.89941,11019 13 | 12,10832.6,11477.55605,10187.64395,10645 14 | 13,9976.2,10295.60992,9656.790075,11141 15 | 14,10028.8,10665.24929,9392.350709,16387 16 | 15,10544.2,12013.27988,9075.120118,18516 17 | 16,10578.4,11741.9937,9414.806299,22351 -------------------------------------------------------------------------------- /all-templates/line-ordinal-band/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/line-ordinal-band/fallback.png -------------------------------------------------------------------------------- /all-templates/line-ordinal/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "legendLabels": ["Blue", "Green", "Red"], 5 | "legendStyle": "line", 6 | "directLabeling": true, 7 | "directLabelingAdjust": { 8 | "Blue": { 9 | "x": 0, 10 | "y": 0 11 | }, 12 | "Green": { 13 | "x": 0, 14 | "y": 7 15 | }, 16 | "Red": { 17 | "x": 0, 18 | "y": -7 19 | } 20 | }, 21 | "colour_palette": { 22 | "Blue": "#274796", 23 | "Green": "green", 24 | "Red": "#E73F40" 25 | }, 26 | 27 | "sourceText": ["Office for National Statistics"], 28 | "draggable": false, 29 | "annotationsChart": [], 30 | 31 | "wordwrap": [30, 20, 10], 32 | "annoAlign": ["middle", "middle", "end"], 33 | "annotationBullet": ["An annotation", "Another annotation"], 34 | 35 | "circles": true, 36 | "annotationCXCY": [ 37 | {"cx":"2001/02", "cy":68,"text":"circle annotation"} 38 | ], 39 | "annotationColour": ["green"], 40 | 41 | "yAxisLabel": "%", 42 | "yAxisScale": "auto_zero_max", 43 | "yAxisBreak": false, 44 | "yAxisBreak": {"sm":65, "md":65, "lg":65}, 45 | "ticksEvery":{"sm":4, "md":2, "lg":2} 46 | }, 47 | 48 | "optional": { 49 | "margin": { 50 | "sm": { 51 | "top": 50, 52 | "right": 10, 53 | "bottom": 55, 54 | "left": 30 55 | }, 56 | "md": { 57 | "top": 50, 58 | "right": 50, 59 | "bottom": 55, 60 | "left": 30 61 | }, 62 | "lg": { 63 | "top": 50, 64 | "right": 50, 65 | "bottom": 55, 66 | "left": 30 67 | } 68 | }, 69 | 70 | "aspectRatio": { 71 | "sm":[16, 13], 72 | "md":[16, 12], 73 | "lg":[16, 10] 74 | }, 75 | "mobileBreakpoint": 414, 76 | "midBreakpoint": 600, 77 | 78 | "xAxisTextFormat": {"sm":"%y","md":"%Y","lg":"%b %y"}, 79 | 80 | "x_num_ticks": {"sm":6,"md":9,"lg":9}, 81 | "y_num_ticks": {"sm":5, "md":11, "lg":11}, 82 | 83 | "lineMarkers": true, 84 | 85 | "annotateLineX1_Y1_X2_Y2": [ 86 | [ 87 | ["1999/00", "200"], 88 | ["1999/00", "0"] 89 | ] 90 | ], 91 | "annotateRect": [ 92 | { 93 | "topLeft":["1998/99", 200], 94 | "bottomRight":["2001/02", 0], 95 | "fill":"#ABCDEF", 96 | "opacity":0.4 97 | } 98 | ], 99 | "centre_line": true, 100 | "centre_line_value": 25 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /all-templates/line-ordinal/data.csv: -------------------------------------------------------------------------------- 1 | date,Blue,Green,Red 2 | 1991/92,142,51,91 3 | 1992/93,146,39,96 4 | 1993/94,141,40,85 5 | 1994/95,112,46,80 6 | 1995/96,130,38,69 7 | 1996/97,141,50,73 8 | 1997/98,140,51,null 9 | 1998/99,121,52,null 10 | 1999/00,133,57,null 11 | 2000/01,151,55,null 12 | 2001/02,150,50,null 13 | 2002/03,172,54,null 14 | 2003/04,184,47,null 15 | 2004/05,189,45,109 16 | 2005/06,175,56,129 17 | 2006/07,200,63,135 18 | 2007/08,158,66,117 19 | 2008/09,159,126,142 20 | 2009/10,130,104,134 21 | 2010/11,125,92,122 22 | 2011/12,133,92,126 23 | 2012/13,131,75,115 24 | 2013/14,125,78,114 25 | 2014/15,128,86,105 26 | 2015/16,132,86,88 -------------------------------------------------------------------------------- /all-templates/line-ordinal/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/line-ordinal/download.png -------------------------------------------------------------------------------- /all-templates/line-ordinal/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/line-ordinal/fallback.png -------------------------------------------------------------------------------- /all-templates/line-with-difference/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | "reference":"CIPH", 5 | "comparison":"Public", 6 | "dateFormat":"%d/%m/%Y", 7 | 8 | "legendLabels" : ["Inflation", "Public sector pay growth","Inflation above public sector pay growth"], 9 | "legendStyle": ["line","line","rect"], 10 | "colour_palette": [ "#BBBDBF" , "#36ADD9", "#f69e91","none"], 11 | 12 | "sourceText":["Average Weekly Earnings","CPIH"], 13 | "sourceURL":["https://www.ons.gov.uk/employmentandlabourmarket/peopleinwork/earningsandworkinghours/datasets/averageweeklyearningsearn01","https://www.ons.gov.uk/economy/inflationandpriceindices/datasets/consumerpriceindices"], 14 | "draggable": false, 15 | "annotationsChart" : [ 16 | { 17 | "xVal": "2012-03-23T00:00:00.000Z", 18 | "yVal": 5, 19 | "path": "", 20 | "text": "Since the public sector pay cap, inflation has been generally higher than public sector pay growth", 21 | "textOffset": [0,0] 22 | } 23 | ], 24 | 25 | "wordwrap":[30,20,10], 26 | "annoAlign": ["start","middle","end"], 27 | "annotationBullet" : ["Since the public sector pay cap, inflation has been generally higher than public sector pay growth"], 28 | 29 | "circles" : false, 30 | "annotationCXCY":[ 31 | ["01/03/2012","5"] 32 | ], 33 | 34 | "yAxisLabel":"%", 35 | "yAxisScale":"auto_min_max", 36 | "yAxisBreak": false, 37 | "yAxisBreak_sm_md_lg": [65,65,65] 38 | }, 39 | 40 | "optional" : { 41 | "margin_sm": [80, 10, 70, 30], 42 | "margin_md": [50, 10, 70, 30], 43 | "margin_lg": [50, 10, 70, 30], 44 | 45 | "aspectRatio_sm" : [16,13], 46 | "aspectRatio_md" : [16,12], 47 | "aspectRatio_lg" : [16,10], 48 | 49 | "mobileBreakpoint" : 610, 50 | 51 | "xAxisTextFormat_sm_md_lg" : ["%y", "%Y", "%Y"], 52 | 53 | "x_num_ticks_sm_md_lg" : [6,12,12], 54 | "y_num_ticks_sm_md_lg" : [5,5,5], 55 | 56 | "lineMarkers" : false, 57 | 58 | "vertical_line" : true, 59 | "annotateLineX1_Y1_X2_Y2" : [ [["Jul-00", "200"],["Jul-00", "0"]], [["Jul-08", "100"],["Jul-08", "200"]] ], 60 | 61 | "annotateRect" : true, 62 | "annotateRectX_Y" : [ [["Jan-94", 200],["Jan-96", 0]], [["Jul-04", 180],["Jul-06", 40]] ], 63 | "lineColor_opcty" : [["#ABCDEF", 0.2], ["#888", 0.4]], 64 | 65 | "centre_line" : true, 66 | "centre_line_value" : 0 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /all-templates/line-with-difference/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/line-with-difference/fallback.png -------------------------------------------------------------------------------- /all-templates/line-with-dropdown/chart.css: -------------------------------------------------------------------------------- 1 | h6 { 2 | font-size: 16px; 3 | margin: 16px 0 8px 0; 4 | font-weight: 700; 5 | color: #323132; 6 | } 7 | 8 | label { 9 | display: block; 10 | width: 100%; 11 | padding: 0; 12 | font-size: 20px; 13 | font-weight: 700; 14 | line-height: inherit; 15 | color: #206095; 16 | border: 0; 17 | margin: 25px 0 0 0; 18 | } 19 | 20 | .chosen-container { 21 | margin-top: 10px; 22 | } 23 | 24 | .visuallyhidden { 25 | position: absolute; 26 | width: 1px; 27 | height: 1px; 28 | margin: -1px; 29 | padding: 0; 30 | overflow: hidden; 31 | clip: rect(0, 0, 0, 0); 32 | border: 0; 33 | } 34 | 35 | path{ 36 | fill:none; 37 | } 38 | 39 | .x text,.y text{ 40 | font-size:14px; 41 | fill:#666; 42 | } 43 | 44 | .y line,.x line{ 45 | stroke:#ccc; 46 | stroke-width:1px; 47 | shape-rendering:crispEdges; 48 | } 49 | 50 | #legend{ 51 | display:flex; 52 | } 53 | 54 | @media only screen and (max-width:400px) { 55 | #legend{ 56 | flex-direction:column; 57 | } 58 | } 59 | .legenditem{ 60 | display:flex; 61 | margin-right:1em; 62 | } 63 | 64 | .square{ 65 | margin-top:0.55em; 66 | margin-right:0.5em; 67 | width:30px; 68 | height:5px; 69 | } 70 | 71 | #dropdown{ 72 | margin-bottom:1em 73 | } 74 | -------------------------------------------------------------------------------- /all-templates/line-with-dropdown/config.js: -------------------------------------------------------------------------------- 1 | dvc = { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "dateFormat": "%d/%m/%Y", 5 | "legendLabels": ["UK regions", "UK", "Your selected region"], 6 | "colour_palette": ["#e7e7e7","#055477",'#D2376D'], 7 | "sourceText": "Adzuna", 8 | "yAxisLabel": "100 = average job adverts in February 2020", 9 | "yAxisScale": [0, 1.5]//can be auto_min_max, auto_zero_max or an array for the domain of the y-scale 10 | }, 11 | 12 | "optional": { 13 | "mobileBreakpoint": 400, //breakpoint for mobile 14 | "mediumBreakpoint": 600, //breakpoint for medium 15 | "referenceline":{"display":true,"series":"reference", "colour":"#055477"},//display is true/false, if set to true the series is the column to use as the reference 16 | 17 | "margin": { 18 | "sm": { 19 | "top": 30, 20 | "right": 40, 21 | "bottom": 26, 22 | "left": 40 23 | }, 24 | "md": { 25 | "top": 30, 26 | "right": 40, 27 | "bottom": 26, 28 | "left": 40 29 | }, 30 | "lg": { 31 | "top": 30, 32 | "right": 40, 33 | "bottom": 26, 34 | "left": 40 35 | }, 36 | }, 37 | "aspectRatio": { 38 | "sm": [1, 1], 39 | "md": [2, 1], 40 | "lg": [2, 1] 41 | }, 42 | 43 | "xAxisTextFormat": { 44 | "sm": "%b-%y", 45 | "md": "%b-%y", 46 | "lg": "%b-%y" 47 | }, 48 | "x_ticks_every": { 49 | "sm": 30, 50 | "md": 30, 51 | "lg": 20 52 | }, 53 | "y_num_ticks": { 54 | "sm": 3, 55 | "md": 3, 56 | "lg": 3 57 | }, 58 | } 59 | }; 60 | -------------------------------------------------------------------------------- /all-templates/line-with-dropdown/datadownload.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/line-with-dropdown/datadownload.xlsx -------------------------------------------------------------------------------- /all-templates/line-with-dropdown/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/line-with-dropdown/fallback.png -------------------------------------------------------------------------------- /all-templates/line-with-dropdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Line chart with dropdown 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

Select a region or country to compare against the UK index

27 | 28 |

29 | 30 |
31 | 32 | 35 |
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.
36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /all-templates/line/data.csv: -------------------------------------------------------------------------------- 1 | date,Blue,Light blue,Long label that's awkward 2 | Jan-91,142,51,91 3 | Jan-92,146,39,96 4 | Jan-93,141,40,85 5 | Jan-94,112,46,80 6 | Jan-95,130,38,69 7 | Jan-96,141,50,73 8 | Jan-97,140,51,null 9 | Jan-98,121,52,null 10 | Jan-99,133,57,null 11 | Jan-00,151,55,null 12 | Jan-01,150,50,null 13 | Jan-02,172,54,null 14 | Jan-03,184,47,null 15 | Jan-04,189,45,109 16 | Jan-05,175,56,129 17 | Jan-06,200,63,135 18 | Jan-07,158,66,117 19 | Jan-08,159,126,142 20 | Jan-09,130,104,134 21 | Jan-10,125,92,122 22 | Jan-11,133,92,126 23 | Jan-12,131,75,115 24 | Jan-13,125,78,114 25 | Jan-14,128,86,105 26 | Jan-15,132,86,88 -------------------------------------------------------------------------------- /all-templates/line/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/line/download.png -------------------------------------------------------------------------------- /all-templates/line/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/line/fallback.png -------------------------------------------------------------------------------- /all-templates/marimekko/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | 5 | "legendLabels" : ["Financial","Real estate, professional, scientific and technical", "Travel", "Information and communication", "Manufacturing", 6 | "All other categories"], 7 | 8 | "legendXAnnotation" : "% of total value of service exports", 9 | 10 | "legendYAnnotation" : "total value of service exports", 11 | 12 | "colour_palette" : ["#8165a6", "#3f0057", "#c3c9f4", "#60327e", "#a297cd", "#ccc", "#ccc", "#ccc"], 13 | 14 | "cat_hover" : ["Greater Manchester Combined Authority", "Edinburgh and South East Scotland City Region", "West Midlands Combined Authority", "Glasgow City Region", 15 | "Aberdeen City Region","Cardiff Capital Region", "Cambridgeshire & Peterborough Combined Authority", "Liverpool City Region Combined Authority", "West of England Combined Authority", 16 | "North of Tyne Combined Authority", "Sheffield City Region", "Tees Valley Combined Authority", "Swansea Bay City Region"], 17 | 18 | "sourceText":["Office for National Statistics"], 19 | "sourceURL":["http://www.ons.gov.uk"], 20 | 21 | "xAxisLabel":"%" 22 | }, 23 | "optional" : { 24 | "margin_sm": [20, 50, 35, 130], 25 | "margin_md": [20, 80, 35, 155], 26 | "margin_lg": [20, 80, 35, 155], 27 | 28 | "aspectRatio_sm" : [1,4], 29 | "aspectRatio_md" : [16,20], 30 | "aspectRatio_lg" : [16,16], 31 | 32 | "mobileBreakpoint" : 610, 33 | 34 | "x_num_ticks_sm_md_lg" : [4,4,4] 35 | 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /all-templates/marimekko/data.csv: -------------------------------------------------------------------------------- 1 | group,Financial,"Real estate, professional, scientific and technical",Travel,Information and communication 2 | Greater Manchester CA,1406,1014,887,506 3 | Edinburgh and South East Scotland CR,1981,449,1516,520 4 | West Midlands CA,1858,526,909,339 5 | Glasgow CR,1554,568,435,287 -------------------------------------------------------------------------------- /all-templates/marimekko/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/marimekko/fallback.png -------------------------------------------------------------------------------- /all-templates/quiz/css/data.csv: -------------------------------------------------------------------------------- 1 | state,Male,Female 2 | 7 to 9 years of age,8.53,7.51 3 | 10 to 12 years of age,10.60,11.35 4 | 13 to 15 years of age,17.35,20.19 5 | -------------------------------------------------------------------------------- /all-templates/quiz/css/img/boy_and_girl-06.svg: -------------------------------------------------------------------------------- 1 | boy_and_girl -------------------------------------------------------------------------------- /all-templates/quiz/css/img/boy_and_girl-08.svg: -------------------------------------------------------------------------------- 1 | boy_and_girl 2 | -------------------------------------------------------------------------------- /all-templates/quiz/css/img/bullet-large.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /all-templates/quiz/css/img/bullet-medium.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /all-templates/quiz/css/img/bullet-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /all-templates/quiz/css/img/sweet_2-01.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 12 | 14 | 16 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /all-templates/quiz/img/boy_and_girl-06.svg: -------------------------------------------------------------------------------- 1 | boy_and_girl -------------------------------------------------------------------------------- /all-templates/quiz/img/boy_and_girl-08.svg: -------------------------------------------------------------------------------- 1 | boy_and_girl 2 | -------------------------------------------------------------------------------- /all-templates/quiz/img/bullet-large.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /all-templates/quiz/img/bullet-medium.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /all-templates/quiz/img/bullet-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /all-templates/quiz/img/sweet_2-01.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 12 | 14 | 16 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /all-templates/quiz/lib-sc/modernizr.svg.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.7.1 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-svg 3 | */ 4 | ;window.Modernizr=function(a,b,c){function u(a){i.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.7.1",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l={svg:"http://www.w3.org/2000/svg"},m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.svg=function(){return!!b.createElementNS&&!!b.createElementNS(l.svg,"svg").createSVGRect};for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},u(""),h=j=null,e._version=d,e}(this,this.document); -------------------------------------------------------------------------------- /all-templates/quiz/lib-sc/styles.css: -------------------------------------------------------------------------------- 1 | 2 | .ticks { 3 | font: 10px sans-serif; 4 | } 5 | 6 | .track, 7 | .track-inset, 8 | .track-overlay { 9 | stroke-linecap: round; 10 | } 11 | h3 { 12 | padding-bottom: 40px; 13 | } 14 | 15 | .container { 16 | font-family: 'Open Sans', Arial, sans-serif; 17 | max-width: 800px; 18 | padding-top: 10px; 19 | padding-left: 0; 20 | padding-right: 0; 21 | text-align: left; 22 | position: relative; 23 | margin-top: 48px; 24 | } 25 | 26 | .track { 27 | stroke: #000; 28 | stroke-opacity: 0.3; 29 | stroke-width: 10px; 30 | } 31 | 32 | .track-inset { 33 | stroke: #ddd; 34 | stroke-width: 8px; 35 | } 36 | 37 | .track-overlay { 38 | pointer-events: stroke; 39 | stroke-width: 50px; 40 | stroke: transparent; 41 | cursor: crosshair; 42 | } 43 | 44 | .handle { 45 | fill: #fff; 46 | stroke: #000; 47 | stroke-opacity: 0.5; 48 | stroke-width: 1.25px; 49 | } 50 | -------------------------------------------------------------------------------- /all-templates/regional-map-bar/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | 4 | "colour_palette":[ 5 | "#ffffcc", 6 | "#a1dab4", 7 | "#41b6c4", 8 | "#225ea8" 9 | ], 10 | "screenreadertext": "", 11 | 12 | "sourceText":["Construction Statistics, Great Britain: 2019, Office for National Statistics"], 13 | "sourceURL":["http://www.ons.gov.uk/ons/publications/re-reference-tables.html?edition=tcm%3A77-350752"], 14 | 15 | "annotationChart": [ 16 | 17 | ], 18 | "annotationBullet": [ 19 | 20 | ], 21 | "annotationXY":[ 22 | 23 | ], 24 | "annotationAlign":[ 25 | 26 | ], 27 | 28 | "barHeight_sm_md_lg" : [30,30,30], 29 | 30 | "xAxisLabel":"% employment of businesses classified as construction", 31 | "xAxisScale":"auto_zero_max" 32 | }, 33 | "optional" : { 34 | "display_average": "no", 35 | "average": 2.1, 36 | "average_label":"UK average", 37 | "margin_sm": [25, 20, 35, 160], 38 | "margin_md": [25, 20, 35, 160], 39 | "margin_lg": [25, 20, 35, 160], 40 | 41 | "aspectRatio_sm" : [4,7], 42 | "aspectRatio_md" : [1,1], 43 | "aspectRatio_lg" : [16,10], 44 | "number_breaks" : 4, 45 | "breaks_choice" : [0, 5, 10, 13,19], 46 | "mobileBreakpoint" : 550, 47 | "x_num_ticks_sm_md_lg" : [6,8,5], 48 | "centre_line" : false, 49 | "centre_line_value" : 0 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /all-templates/regional-map-bar/data.csv: -------------------------------------------------------------------------------- 1 | AREANM,AREACD,value 2 | North East,E12000001,3.628401627 3 | North West,E12000002,12.19111667 4 | Yorkshire and the Humber,E12000003,7.507037848 5 | East Midlands,E12000004,6.568658117 6 | West Midlands,E12000005,7.507037848 7 | East ,E12000006,11.47951204 8 | London,E12000007,13.10603691 9 | South East,E12000008,15.13919299 10 | South West,E12000009,8.680012512 11 | Wales,W92000004,3.964654363 12 | Scotland,S92000003,10.22833907 13 | -------------------------------------------------------------------------------- /all-templates/regional-map-bar/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/regional-map-bar/fallback.png -------------------------------------------------------------------------------- /all-templates/sankey-dropdown/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | "colour_palette": [ 5 | "#206095", 6 | "#118C7B", 7 | "#003C57", 8 | "#A8BD3A", 9 | "#27A0CC" 10 | ], 11 | "source_label":"2001", 12 | "target_label":"2012", 13 | "unit_preffix": "£", 14 | "unit_suffix": "million", 15 | "format": ",.0f", 16 | "load_filter": "filter 1", 17 | "alt_text": "Use title from tracker here to provide an explanation of chart", 18 | "source":"ONS ...." 19 | }, 20 | "optional" : { 21 | "margin_sm": [10, 10, 10, 10], 22 | "margin_md": [10, 10, 10, 10], 23 | "margin_lg": [10, 10, 10, 10], 24 | 25 | "aspectRatio_sm" : [7,3], 26 | "aspectRatio_md" : [7,4], 27 | "aspectRatio_lg" : [7,5], 28 | 29 | "mobileBreakpoint" : 400 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /all-templates/sankey-dropdown/data.csv: -------------------------------------------------------------------------------- 1 | source,target,filter,value,year1998,year1999 2 | Source A,Source A,filter 1,1,438,404 3 | Source A,Source B,filter 1,277,144,299 4 | Source A,Source C,filter 1,242,172,355 5 | Source A,Source D,filter 1,348,459,2 6 | Source B,Source A,filter 1,416,207,477 7 | Source B,Source B,filter 1,264,442,488 8 | Source B,Source C,filter 1,421,91,269 9 | Source B,Source D,filter 1,376,496,74 10 | Source C,Source A,filter 1,500,137,364 11 | Source C,Source B,filter 1,195,124,377 12 | Source C,Source C,filter 1,81,383,187 13 | Source C,Source D,filter 1,335,167,270 14 | Source D,Source A,filter 1,213,157,414 15 | Source D,Source B,filter 1,16,320,296 16 | Source D,Source C,filter 1,389,21,291 17 | Source D,Source D,filter 1,240,342,113 18 | Source A,Source A,filter 2,226,176,224 19 | Source A,Source B,filter 2,138,165,116 20 | Source A,Source C,filter 2,219,276,5 21 | Source A,Source D,filter 2,86,406,130 22 | Source B,Source A,filter 2,488,495,95 23 | Source B,Source B,filter 2,55,58,215 24 | Source B,Source C,filter 2,342,90,96 25 | Source B,Source D,filter 2,17,93,236 26 | Source C,Source A,filter 2,431,331,267 27 | Source C,Source B,filter 2,134,198,90 28 | Source C,Source C,filter 2,87,495,192 29 | Source C,Source D,filter 2,231,364,55 30 | Source D,Source A,filter 2,232,142,337 31 | Source D,Source B,filter 2,123,442,14 32 | Source D,Source C,filter 2,386,17,199 33 | Source D,Source D,filter 2,317,94,60 34 | Source A,Source A,filter 3,113,56,424 35 | Source A,Source B,filter 3,211,99,112 36 | Source A,Source C,filter 3,469,331,231 37 | Source A,Source D,filter 3,184,244,81 38 | Source B,Source A,filter 3,90,441,41 39 | Source B,Source B,filter 3,126,361,285 40 | Source B,Source C,filter 3,105,297,65 41 | Source B,Source D,filter 3,158,342,436 42 | Source C,Source A,filter 3,5,40,396 43 | Source C,Source B,filter 3,118,299,320 44 | Source C,Source C,filter 3,483,148,233 45 | Source C,Source D,filter 3,478,159,137 46 | Source D,Source A,filter 3,55,418,152 47 | Source D,Source B,filter 3,495,242,389 48 | Source D,Source C,filter 3,395,10,126 49 | Source D,Source D,filter 3,239,72,491 -------------------------------------------------------------------------------- /all-templates/sankey-dropdown/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/sankey-dropdown/fallback.png -------------------------------------------------------------------------------- /all-templates/sankey/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | "colour_palette": [ 5 | "#206095", 6 | "#118C7B", 7 | "#003C57", 8 | "#A8BD3A", 9 | "#27A0CC" 10 | ], 11 | "source_label":"2001", 12 | "target_label":"2012", 13 | "unit_preffix": "£", 14 | "unit_suffix": "million", 15 | "format": ",.0f", 16 | "alt_text": "Use title from tracker here to provide an explanation of chart", 17 | "source":"ONS ...." 18 | }, 19 | "optional" : { 20 | "margin_sm": [10, 10, 10, 10], 21 | "margin_md": [10, 10, 10, 10], 22 | "margin_lg": [10, 10, 10, 10], 23 | 24 | "aspectRatio_sm" : [7,3], 25 | "aspectRatio_md" : [7,4], 26 | "aspectRatio_lg" : [7,5], 27 | 28 | "mobileBreakpoint" : 400 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /all-templates/sankey/data.csv: -------------------------------------------------------------------------------- 1 | source,target,value 2 | Source A,Source A,475 3 | Source A,Source B,67 4 | Source A,Source C,15 5 | Source A,Source D,11 6 | Source B,Source A,135 7 | Source B,Source B,154 8 | Source B,Source C,3 9 | Source B,Source D,19 10 | Source C,Source A,124 11 | Source C,Source B,15 12 | Source C,Source C,110 13 | Source C,Source D,7 14 | Source D,Source A,65 15 | Source D,Source B,65 16 | Source D,Source C,10 17 | Source D,Source D,56 -------------------------------------------------------------------------------- /all-templates/sankey/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/sankey/fallback.png -------------------------------------------------------------------------------- /all-templates/scatter-canvas/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "sourceText":"Statistics", 4 | "sourceURL":"http://www.ons.gov.uk", 5 | "xAxisLabel":"Life expectancy", 6 | "yAxisLabel":"Healthy life expectancy", 7 | "annotations":false, 8 | "textAnnotations":[{ 9 | "x":70, 10 | "y":75, 11 | "text":"example annotation text" 12 | },{ 13 | "x":88, 14 | "y":55, 15 | "text":"example annotation text" 16 | }], 17 | "textAnnotationWrap":100 18 | }, 19 | "optional" : { 20 | "margin_sm": [50, 10, 55, 30], 21 | "margin_md": [50, 10, 55, 30], 22 | "margin_lg": [50, 10, 55, 30], 23 | 24 | "aspectRatio_sm" : [16,13], 25 | "aspectRatio_md" : [16,12], 26 | "aspectRatio_lg" : [16,10], 27 | 28 | "mobileBreakpoint" : 610, 29 | 30 | "x_num_ticks_sm_md_lg" : [6,12,12], 31 | "y_num_ticks_sm_md_lg" : [5,11,11], 32 | 33 | "annotation_line" : false, 34 | "annotateLineX1_Y1_X2_Y2" : [ [[70, 50],[92, 80]], [[200, 200],[400, 400]] ], 35 | 36 | "annotateRect" : false, 37 | "annotateRectX_Y" : [ [[88, 55],[92, 46]], [[68, 80],[72, 70]] ], 38 | "rectColor_opcty" : [["#ABCDEF", 0.2], ["#888", 0.4]] 39 | 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /all-templates/scatter-canvas/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/scatter-canvas/fallback.png -------------------------------------------------------------------------------- /all-templates/scatter-voronoi-dropdown/data/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data/dummydata.csv", 4 | "pickxdata":"SPDflows", 5 | "pickydata":"Censusflows", 6 | 7 | "sourceText":["Department for Education – Key stage 4 attainment data"], 8 | "sourceURL":["http://www.ons.gov.uk/"], 9 | "rectannotations":[], 10 | "textAnnotations":[{ 11 | "x":1000, 12 | "y":4000, 13 | "text":"example annotation text" 14 | },{ 15 | "x":-7000, 16 | "y":-1000, 17 | "text":"example annotation text" 18 | }], 19 | "textAnnotationWrap":100, 20 | "d3AnnotationWrap":300, 21 | "xAxisLabel":"% pupils whose first language is not English", 22 | "yAxisLabel":"Average attainment 8 score", 23 | "AxisScale":"", 24 | "xAxisScale":[0,80], 25 | "yAxisScale":[0,80] 26 | 27 | }, 28 | "optional" : { 29 | "margin_sm": [50 ,20, 0, 50], 30 | "margin_md": [50, 20, 0, 50], 31 | "margin_lg": [50, 50, 0, 50], 32 | 33 | "aspectRatio_sm" : [1,1], 34 | "aspectRatio_md" : [1,1], 35 | "aspectRatio_lg" : [1,1], 36 | 37 | "mobileBreakpoint" : 610, 38 | 39 | "x_num_ticks_sm_md_lg" : [4,4,5], 40 | "y_num_ticks_sm_md_lg" : [4,4,5], 41 | 42 | "annotateLineX1_Y1_X2_Y2":[], 43 | "lineColor_opcty" : [] 44 | 45 | 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /all-templates/scatter-voronoi-dropdown/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/scatter-voronoi-dropdown/fallback.png -------------------------------------------------------------------------------- /all-templates/scatter-voronoi/config.js: -------------------------------------------------------------------------------- 1 | var dvc = { 2 | "essential": { 3 | "accessibleSummary":"This chart has been hidden from screen readers. The chart title summarises the chart and the data is available below", 4 | "graphic_data_url": "dummydata.csv", 5 | "xdata": "SPDflows", //this is the column for the x axis 6 | "ydata": "Censusflows", //this is the column from the y axis 7 | "sourceText": "My source information text here", 8 | "rectannotations": [ 9 | // { 10 | // "x":0, 11 | // "y":5000, 12 | // "width":5000, 13 | // "height":5000, 14 | // "colour":"grey", 15 | // "opacity":0.1 16 | // }, 17 | // { 18 | // "x":-8000, 19 | // "y":0, 20 | // "width":8000, 21 | // "height":8000, 22 | // "colour":"grey", 23 | // "opacity":0.1 24 | // } 25 | ], 26 | "textAnnotations": [ 27 | // { 28 | // "x":1000, 29 | // "y":4000, 30 | // "text":"example annotation text" 31 | // },{ 32 | // "x":-7000, 33 | // "y":-1000, 34 | // "text":"example annotation text" 35 | // } 36 | ], 37 | "textAnnotationWrap": 100, 38 | "d3AnnotationWrap": 300, 39 | "xAxisLabel": "X label", 40 | "yAxisLabel": "Y Label", 41 | "AxisScale": "auto_min_max", 42 | "xAxisScale": [-8000, 5000], 43 | "yAxisScale": [-8000, 5000] 44 | 45 | }, 46 | "optional": { 47 | "margin": { 48 | "sm": { 49 | "top": 25, 50 | "right": 20, 51 | "bottom": 20, 52 | "left": 40 53 | }, 54 | "md": { 55 | "top": 25, 56 | "right": 20, 57 | "bottom": 20, 58 | "left": 40 59 | }, 60 | "lg": { 61 | "top": 25, 62 | "right": 20, 63 | "bottom": 20, 64 | "left": 40 65 | } 66 | }, 67 | 68 | "aspectRatio": { 69 | "sm": [5, 6], 70 | "md": [15, 6], 71 | "lg": [15, 9] 72 | }, 73 | 74 | "mobileBreakpoint": 410, 75 | "mediumBreakpoint": 600, 76 | 77 | "x_num_ticks": { 78 | "sm": 4, 79 | "md": 4, 80 | "lg": 5 81 | }, 82 | "y_num_ticks": { 83 | "sm": 4, 84 | "md": 4, 85 | "lg": 5 86 | }, 87 | 88 | "annotateLineX1_Y1_X2_Y2": [ 89 | // [ 90 | // [-8000, -4000], 91 | // [5000, 2000] 92 | // ], 93 | // [ 94 | // [-6000, 2000], 95 | // [0, 0] 96 | // ] 97 | ], 98 | "lineColor_opcty": [ 99 | ["#704C27", 1], 100 | ["#36ADD9", 0.5] 101 | ] 102 | 103 | 104 | } 105 | }; 106 | -------------------------------------------------------------------------------- /all-templates/scatter-voronoi/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/scatter-voronoi/fallback.png -------------------------------------------------------------------------------- /all-templates/scatter-voronoi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scatter plot with voronoi 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /all-templates/scatter-voronoi/styles.css: -------------------------------------------------------------------------------- 1 | body, tspan, label, text { 2 | font-family: 'Open Sans', sans-serif; 3 | } 4 | 5 | .axis path, 6 | .axis line { 7 | fill: none; 8 | stroke: #000; 9 | shape-rendering: crispEdges; 10 | } 11 | 12 | .y.axis path { 13 | display: none; 14 | } 15 | 16 | .overlay { 17 | fill: none; 18 | stroke: none; 19 | pointer-events: all; 20 | } 21 | 22 | .focusLine { 23 | fill: none; 24 | stroke: steelblue; 25 | stroke-width: 0.5px; 26 | } 27 | 28 | .focusCircle { 29 | fill: red; 30 | } 31 | 32 | .brush { 33 | width: 500px; 34 | } 35 | 36 | .annotation-note-bg { 37 | fill: #EAEAEA !important; 38 | fill-opacity: 0.8 !important; 39 | } 40 | 41 | h6 { 42 | font-size: 16px; 43 | margin: 16px 0 8px 0; 44 | font-weight: 700; 45 | color:#323132; 46 | } 47 | 48 | .visuallyhidden { 49 | position: absolute; 50 | overflow: hidden; 51 | clip: rect(0 0 0 0); 52 | height: 1px; width: 1px; 53 | margin: -1px; padding: 0; border: 0; 54 | } 55 | -------------------------------------------------------------------------------- /all-templates/scatter-with-groups/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | "pickxdata":"gdhi", 5 | "pickydata":"employment", 6 | "fills":["#206095", "#118C7B", "#003C57"], 7 | "sourceText":["My source information text here"], 8 | "sourceURL":["http://www.ons.gov.uk/"], 9 | "legendText":"Regional values for different time periods", 10 | "highlight":"UnitedKingdom", 11 | "highlightLegendText":"UK values", 12 | "rectannotations":[], 13 | "textAnnotations":[{ 14 | "x":0.5, 15 | "y":-0.5, 16 | "text":"2008-2009" 17 | },{ 18 | "x":4, 19 | "y":0.6, 20 | "text":"1997-2007" 21 | },{ 22 | "x":2, 23 | "y":2, 24 | "text":"2010-2016" 25 | }], 26 | "textAnnotationWrap":100, 27 | "tooltipX":"Employment growth rate", 28 | "tooltipY":"GHDI per head", 29 | "tooltipXformat":".1f", 30 | "tooltipYformat":".1f", 31 | "d3AnnotationWrap":200, 32 | "xAxisLabel":"Average regional GHDI per head growth rate", 33 | "yAxisLabel":"Average regional employment growth rate", 34 | "AxisScale":"auto_min_max", 35 | "xAxisScale":[-8000,5000], 36 | "yAxisScale":[-8000,5000] 37 | 38 | }, 39 | "optional" : { 40 | "margin_sm": [50 ,20, 10, 50], 41 | "margin_md": [50, 20, 10, 50], 42 | "margin_lg": [50, 50, 10, 50], 43 | 44 | "aspectRatio_sm" : [1.5,1], 45 | "aspectRatio_md" : [1.5,1], 46 | "aspectRatio_lg" : [1.5,1], 47 | 48 | "mobileBreakpoint" : 610, 49 | 50 | "x_num_ticks_sm_md_lg" : [4,5,5], 51 | "y_num_ticks_sm_md_lg" : [4,5,5], 52 | 53 | "annotateLineX1_Y1_X2_Y2":[[[0,-3],[0,3]],[[-1,0],[5,0]]], 54 | "lineColor_opcty" : [["#666", 0.5],["#666", 0.5]] 55 | 56 | 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /all-templates/scatter-with-groups/data.csv: -------------------------------------------------------------------------------- 1 | name,group,gdhi,employment 2 | London,grp1,4.9,1.7 3 | England,grp1,3.8,1.1 4 | United Kingdom,grp1,3.8,1.1 5 | South East,grp1,3.5,0.9 6 | West Midlands,grp1,3.2,0.6 7 | East Midlands,grp1,3.7,0.9 8 | Northern Ireland,grp1,4.0,1.4 9 | South West,grp1,3.4,1.2 10 | Yorkshire and The Humber,grp1,3.5,1.1 11 | Scotland,grp1,4.2,1.0 12 | North West,grp1,3.5,1.0 13 | Wales,grp1,3.5,1.2 14 | North East,grp1,3.2,0.9 15 | London,grp2,-0.6,-2.4 16 | England,grp2,1.8,-1.7 17 | United Kingdom,grp2,1.7,-1.6 18 | South East,grp2,1.7,-1.2 19 | West Midlands,grp2,2.3,-0.6 20 | East Midlands,grp2,1.7,-1.3 21 | Northern Ireland,grp2,1.1,0.5 22 | South West,grp2,0.8,-2.8 23 | Yorkshire and The Humber,grp2,2.6,-1.0 24 | Scotland,grp2,1.5,-2.2 25 | North West,grp2,3.6,-1.4 26 | Wales,grp2,0.0,-1.0 27 | North East,grp2,4.6,-1.3 28 | London,grp3,3.8,2.7 29 | England,grp3,2.9,1.5 30 | United Kingdom,grp3,2.9,1.4 31 | South East,grp3,2.8,1.2 32 | West Midlands,grp3,2.7,1.4 33 | East Midlands,grp3,2.7,1.1 34 | Northern Ireland,grp3,2.6,1.3 35 | South West,grp3,2.5,1.3 36 | Yorkshire and The Humber,grp3,2.5,1.2 37 | Scotland,grp3,2.4,1.0 38 | North West,grp3,2.3,0.9 39 | Wales,grp3,2.1,1.2 40 | North East,grp3,2.1,1.3 -------------------------------------------------------------------------------- /all-templates/scatter-with-groups/data.xls: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/scatter-with-groups/data.xls -------------------------------------------------------------------------------- /all-templates/scatter-with-groups/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/scatter-with-groups/fallback.png -------------------------------------------------------------------------------- /all-templates/simple-bar-horizontal/data.csv: -------------------------------------------------------------------------------- 1 | category,value 2 | North West,58 3 | North East,87 4 | Wales,56 5 | South East,12 6 | London,18 7 | South West,-5 8 | East Midlands,48 9 | Yorkshire and The Humber,-2 10 | Scotland,54 11 | East,5 12 | West Midlands,8 13 | Northern Ireland,55 14 | -------------------------------------------------------------------------------- /all-templates/simple-bar-vertical/data.csv: -------------------------------------------------------------------------------- 1 | num,other 1980,2.2 1981,4.2 1982,4.7 1983,5.3 1984,-0.6 1985,2.2 1986,2.6 1987,3.1 1988,2 1989,-0.3 1990,1.1 1991,3.4 1992,3.5 1993,3.9 1994,2.6 1995,0.8 1996,1.5 1997,1.8 1998,1.8 1999,2.3 2000,3.4 2001,1.6 2002,2.3 2003,4.2 2004,2 2005,0.9 2006,2.4 2007,1.6 2008,0.4 2009,-2.6 2010,2 2011,1.3 2012,-1.2 2 | -------------------------------------------------------------------------------- /all-templates/slope-multiple/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "dataFile":"data.csv", 4 | "sourceText":["Office for National Statistics - Wealth and Assets Survey"], 5 | "yAxisScale":[0.30,1], 6 | "numberFormat":".0%", 7 | "gHeight_sm_md_lg":[30,27.5,25], 8 | "legendLabels":["16 to 34 years", "35 to 44 years", "45 to 54 years", "55years to SPa", "SPa and over"], 9 | "colour_palette":{ 10 | "16 to 34 years":"#053D58", 11 | "35 to 44 years":"#24A79B", 12 | "45 to 54 years":"#3A7899", 13 | "55years to SPa":"#ABC149", 14 | "SPa and over":"#005D60" 15 | } 16 | }, 17 | "optional" : { 18 | "margin_sm": [90, 20, 40, 33], 19 | "margin_md": [70, 20, 40, 33], 20 | "margin_lg": [50, 20, 20, 33], 21 | 22 | "mobileBreakpoint" : 501, 23 | "mediumBreakpoint":600 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /all-templates/slope-multiple/data.csv: -------------------------------------------------------------------------------- 1 | name,employee,selfemployed,incomelost 2 | 16 to 34 years,0.6507,0.566,25 3 | 35 to 44 years,0.687,0.7056,25 4 | 45 to 54 years,0.7402,0.7668,25 5 | 55years to SPa,0.8222,0.897,25 6 | SPa and over,0.93,0.9651,25 7 | 16 to 34 years,0.5012,0.4912,50 8 | 35 to 44 years,0.5632,0.607,50 9 | 45 to 54 years,0.6222,0.6348,50 10 | 55years to SPa,0.741,0.7926,50 11 | SPa and over,0.89,0.9116,50 12 | 16 to 34 years,0.3993,0.3685,75 13 | 35 to 44 years,0.4824,0.5409,75 14 | 45 to 54 years,0.5583,0.5339,75 15 | 55years to SPa,0.7017,0.7559,75 16 | SPa and over,0.8472,0.891,75 17 | -------------------------------------------------------------------------------- /all-templates/slope-multiple/data.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/slope-multiple/data.xlsx -------------------------------------------------------------------------------- /all-templates/slope-multiple/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/slope-multiple/fallback.png -------------------------------------------------------------------------------- /all-templates/slope-voronoi/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "slopeType":"value", 4 | "ifValueShowRanks":true, 5 | "ifRankCustomRank":true, 6 | "ifRankShowValue":true, 7 | "dataFile":"data.csv", 8 | "leftRightTitles": ["Immediate position","Ultimate position"], 9 | "sourceText":["Office for National Statistics, Economic Review"], 10 | "sourceURL":[""], 11 | "sortby":"ascending", 12 | "yAxisScale":"auto_min_max", 13 | "yAxisBreak": false, 14 | "yAxisBreakText":"TOP 20 ▲", 15 | "numberFormat":",.0f", 16 | "gHeight_sm_md_lg":[40,40,40] 17 | }, 18 | "optional" : { 19 | "margin_sm": [40, 180, 20, 75], 20 | "margin_md": [40, 210, 10, 210], 21 | "margin_lg": [40, 210, 10, 200], 22 | 23 | "mobileBreakpoint" : 501, 24 | "mediumBreakpoint":600 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /all-templates/slope-voronoi/data.csv: -------------------------------------------------------------------------------- 1 | name,leftValue,rightValue,leftRank,rightRank,leftCustomRank,rightCustomRank 2 | United States,536,28,536,28,7,13 3 | Belgium,31,216,31,216,12,11 4 | Netherlands,386,983,386,983,8,2 5 | Germany,873,345,873,345,2,9 6 | France,100,631,100,631,11,8 7 | Japan,923,758,923,758,1,5 8 | Switzerland,215,67,215,67,9,12 9 | Luxembourg,553,941,553,941,6,3 10 | Spain,13,997,13,997,13,1 11 | "Virgin Islands, British",716,286,716,286,3,10 12 | United Kingdom,712,864,712,864,4,4 13 | Cayman Islands,179,709,179,709,10,6 14 | Jersey,710,692,710,692,5,7 -------------------------------------------------------------------------------- /all-templates/slope-voronoi/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/slope-voronoi/fallback.png -------------------------------------------------------------------------------- /all-templates/slope/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "slopeType":"value", 4 | "ifValueShowRanks":true, 5 | "ifRankCustomRank":true, 6 | "ifRankShowValue":true, 7 | "dataFile":"data.csv", 8 | "leftRightTitles": ["Immediate position","Ultimate position"], 9 | "sourceText":["Office for National Statistics, Economic Review"], 10 | "sourceURL":[""], 11 | "sortby":"ascending", 12 | "yAxisScale":"auto_min_max", 13 | "yAxisBreak": false, 14 | "yAxisBreakText":"TOP 20 ▲", 15 | "numberFormat":",.0f", 16 | "gHeight_sm_md_lg":[40,40,40] 17 | }, 18 | "optional" : { 19 | "margin_sm": [40, 180, 20, 75], 20 | "margin_md": [40, 210, 10, 210], 21 | "margin_lg": [40, 210, 10, 200], 22 | 23 | "mobileBreakpoint" : 501, 24 | "mediumBreakpoint":600 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /all-templates/slope/data.csv: -------------------------------------------------------------------------------- 1 | name,leftValue,rightValue,leftRank,rightRank,leftCustomRank,rightCustomRank 2 | United States,536,28,536,28,7,13 3 | Belgium,31,216,31,216,12,11 4 | Netherlands,386,983,386,983,8,2 5 | Germany,873,345,873,345,2,9 6 | France,100,631,100,631,11,8 7 | Japan,923,758,923,758,1,5 8 | Switzerland,215,67,215,67,9,12 9 | Luxembourg,553,941,553,941,6,3 10 | Spain,13,997,13,997,13,1 11 | "Virgin Islands, British",716,286,716,286,3,10 12 | United Kingdom,712,864,712,864,4,4 13 | Cayman Islands,179,709,179,709,10,6 14 | Jersey,710,692,710,692,5,7 15 | -------------------------------------------------------------------------------- /all-templates/slope/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/slope/fallback.png -------------------------------------------------------------------------------- /all-templates/small-multiple-bar-horizontal/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "screenreadertext": "Set of small bar charts", 4 | "graphic_data_url": "data.csv", 5 | "dateFormat": "%d/%m/%Y", 6 | 7 | "colour_palette": { 8 | "Exports": "#206095", 9 | "Imports": "#003C57" 10 | }, 11 | "categorySort": [ 12 | "Total Services", 13 | "Technical, trade-related and other business services", 14 | "Professional and management consulting services", 15 | "Explicitly charged and other financial services", 16 | "Intellectual Property", 17 | "Personal Travel" 18 | ], 19 | "sourceText": ["Office for National Statistics"], 20 | "xAxisLabel": "%", 21 | "yAxisLabel": "Regions and Countries", 22 | "yAxisScale": "auto_zero_max_total" 23 | }, 24 | "optional": { 25 | "margin": { 26 | "groupMargin": { 27 | "top": 0, 28 | "right": 0, 29 | "bottom": 0, 30 | "left": 85 31 | }, 32 | "sm": { 33 | "top": 60, 34 | "right": 23, 35 | "bottom": 45, 36 | "left": 10 37 | }, 38 | "md": { 39 | "top": 60, 40 | "right": 23, 41 | "bottom": 45, 42 | "left": 10 43 | }, 44 | "lg": { 45 | "top": 60, 46 | "right": 10, 47 | "bottom": 45, 48 | "left": 10 49 | } 50 | }, 51 | "chart_every":{ 52 | "sm": 1, 53 | "md": 2, 54 | "lg": 3 55 | }, 56 | "aspectRatio": { 57 | "sm": [16, 12], 58 | "md": [16, 12], 59 | "lg": [16, 12] 60 | }, 61 | "legendHeight":{ 62 | "sm": 45, 63 | "md": 30, 64 | "lg": 30 65 | }, 66 | 67 | "mobileBreakpoint": 400, 68 | "middleBreakpoint": 600, 69 | "x_ticks_num": { 70 | "sm": 8, 71 | "md": 8, 72 | "lg": 8 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /all-templates/small-multiple-bar-horizontal/datadownload.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-bar-horizontal/datadownload.xlsx -------------------------------------------------------------------------------- /all-templates/small-multiple-bar-horizontal/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-bar-horizontal/fallback.png -------------------------------------------------------------------------------- /all-templates/small-multiple-horizontal-clustered-bar-chart-confidence-intervals/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "regions.csv", 4 | "dateFormat": "%d/%m/%Y", 5 | 6 | "colour_palette": [ 7 | { 8 | "key": "Adjusted for age", 9 | "colour": "#A8BD3A" 10 | }, 11 | { 12 | "key": "+ Geography", 13 | "colour": "#549E99" 14 | }, 15 | { 16 | "key": "+ Socio-economics", 17 | "colour": "#1E7F81" 18 | }, 19 | { 20 | "key": "+ Self-reported health/disability", 21 | "colour": "#175A7A" 22 | }, 23 | { 24 | "key":"+ Hospital-based comorbidities", 25 | "colour":"#003c57" 26 | } 27 | 28 | ], 29 | "categorySort": ["Cardiovascular disease","Metabolic","East","Respiratory","Cancer","Musculoskeletal","Renal","Renal","Mental/behavioural","Neurological"], 30 | "sourceText": ["Office for National Statistics – Explaining ethnic background contrasts in deaths involving Coronavirus (COVID-19)"], 31 | "xAxisLabel": "Rate of death compared to White ethnic group", 32 | "yAxisLabel": "Regions and Countries", 33 | "yAxisScale": "auto_zero_max_total", 34 | "screenreadertext":"Rate of death involving COVID-19 by ethnic group and sex relative to the White population for people in private households, England, 2 March to 28 July 2020" 35 | }, 36 | "optional": { 37 | "margin": { 38 | "sm": { 39 | "top": 40, 40 | "right": 20, 41 | "bottom": 80, 42 | "left": 8 43 | }, 44 | "md": { 45 | "top": 40, 46 | "right": 20, 47 | "bottom": 80, 48 | "left": 8 49 | }, 50 | "lg": { 51 | "top": 40, 52 | "right": 20, 53 | "bottom": 80, 54 | "left": 8 55 | } 56 | }, 57 | "margin_special_left":180, 58 | "chart_every":{ 59 | "sm": 1, 60 | "md": 2, 61 | "lg": 2 62 | }, 63 | "aspectRatio": { 64 | "sm": [4, 12], 65 | "md": [8, 16], 66 | "lg": [16, 24] 67 | }, 68 | "legendHeight":{ 69 | "sm": 120, 70 | "md": 60, 71 | "lg": 60 72 | }, 73 | 74 | "mobileBreakpoint": 400, 75 | "middleBreakpoint": 550, 76 | "x_ticks_every": { 77 | "sm": 2, 78 | "md": 2, 79 | "lg": 1 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /all-templates/small-multiple-horizontal-clustered-bar-chart-confidence-intervals/datadownload.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-horizontal-clustered-bar-chart-confidence-intervals/datadownload.xlsx -------------------------------------------------------------------------------- /all-templates/small-multiple-horizontal-clustered-bar-chart-confidence-intervals/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-horizontal-clustered-bar-chart-confidence-intervals/fallback.png -------------------------------------------------------------------------------- /all-templates/small-multiple-horizontal-clustered-bar-chart-many/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "regions.csv", 4 | "dateFormat": "%d/%m/%Y", 5 | 6 | "colour_palette": [{ 7 | "key": "Males", 8 | "colour": "#234d70" 9 | }, 10 | { 11 | "key": "Females", 12 | "colour": "#00a5a1" 13 | } 14 | 15 | ], 16 | "categorySort": ["Cardiovascular disease","Metabolic","East","Respiratory","Cancer","Musculoskeletal","Renal","Renal","Mental/behavioural","Neurological"], 17 | "sourceText": ["Office for National Statistics – Deaths registered weekly in England and Wales"], 18 | "xAxisLabel": "Age standardised prevalence rate (%)", 19 | "yAxisLabel": "Regions and Countries", 20 | "yAxisScale": "auto_zero_max_total" 21 | }, 22 | "optional": { 23 | "margin": { 24 | "sm": { 25 | "top": 25, 26 | "right": 20, 27 | "bottom": 45, 28 | "left": 5 29 | }, 30 | "md": { 31 | "top": 25, 32 | "right": 20, 33 | "bottom": 50, 34 | "left": 5 35 | }, 36 | "lg": { 37 | "top": 40, 38 | "right": 20, 39 | "bottom": 60, 40 | "left": 5 41 | } 42 | }, 43 | "margin_special_left":100, 44 | "chart_every":{ 45 | "sm": 1, 46 | "md": 2, 47 | "lg": 4 48 | }, 49 | "aspectRatio": { 50 | "sm": [16, 12], 51 | "md": [16, 20], 52 | "lg": [16, 20] 53 | }, 54 | "legendHeight":{ 55 | "sm": 45, 56 | "md": 30, 57 | "lg": 30 58 | }, 59 | 60 | "mobileBreakpoint": 480, 61 | "middleBreakpoint": 670, 62 | "x_ticks_every": { 63 | "sm": 7, 64 | "md": 7, 65 | "lg": 7 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /all-templates/small-multiple-horizontal-clustered-bar-chart-many/datadownload.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-horizontal-clustered-bar-chart-many/datadownload.xlsx -------------------------------------------------------------------------------- /all-templates/small-multiple-horizontal-clustered-bar-chart-many/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-horizontal-clustered-bar-chart-many/fallback.png -------------------------------------------------------------------------------- /all-templates/small-multiple-horizontal-clustered-bar-confidence-intervals-linear-axis/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "regions.csv", 4 | "dateFormat": "%d/%m/%Y", 5 | "colour_palette": [ 6 | { 7 | "key": "Factor 1", 8 | "colour": "#A8BD3A" 9 | }, 10 | { 11 | "key": "Factor 2", 12 | "colour": "#549E99" 13 | }, 14 | { 15 | "key": "Factor 3", 16 | "colour": "#1E7F81" 17 | } 18 | ], 19 | "categorySort": [ 20 | "Category 1", 21 | "Category 2", 22 | "Category 3" 23 | ], 24 | "sourceText": [ 25 | "Office for National Statistics –" 26 | ], 27 | "xAxisLabel": "X-Axis label", 28 | "yAxisLabel": "", 29 | "yAxisScale": "auto_zero_max_total", 30 | "screenreadertext": "Screen reader text" 31 | }, 32 | "optional": { 33 | "margin": { 34 | "sm": { 35 | "top": 40, 36 | "right": 20, 37 | "bottom": 80, 38 | "left": 8 39 | }, 40 | "md": { 41 | "top": 40, 42 | "right": 20, 43 | "bottom": 80, 44 | "left": 8 45 | }, 46 | "lg": { 47 | "top": 40, 48 | "right": 20, 49 | "bottom": 80, 50 | "left": 8 51 | } 52 | }, 53 | "margin_special_left": 180, 54 | "chart_every": { 55 | "sm": 1, 56 | "md": 1, 57 | "lg": 2 58 | }, 59 | "aspectRatio": { 60 | "sm": [ 61 | 4, 62 | 12 63 | ], 64 | "md": [ 65 | 16, 66 | 16 67 | ], 68 | "lg": [ 69 | 16, 70 | 16 71 | ] 72 | }, 73 | "legendHeight": { 74 | "sm": 120, 75 | "md": 60, 76 | "lg": 60 77 | }, 78 | "mobileBreakpoint": 400, 79 | "middleBreakpoint": 550, 80 | "x_num_ticks_sm_md_lg": [ 81 | 4, 82 | 4, 83 | 4] 84 | } 85 | } -------------------------------------------------------------------------------- /all-templates/small-multiple-horizontal-clustered-bar-confidence-intervals-linear-axis/datadownload.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-horizontal-clustered-bar-confidence-intervals-linear-axis/datadownload.xlsx -------------------------------------------------------------------------------- /all-templates/small-multiple-horizontal-clustered-bar-confidence-intervals-linear-axis/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-horizontal-clustered-bar-confidence-intervals-linear-axis/fallback.png -------------------------------------------------------------------------------- /all-templates/small-multiple-horizontal-clustered-bar-confidence-intervals-linear-axis/regions.csv: -------------------------------------------------------------------------------- 1 | date,series,chiffre,lower,upper,category 2 | Category 1,Factor 1,600,580,610,Chart 1 3 | Category 2,Factor 1,350,340,360,Chart 1 4 | Category 3,Factor 1,100,90,110,Chart 1 5 | Category 1,Factor 1,610,590,620,Chart 2 6 | Category 2,Factor 1,360,350,370,Chart 2 7 | Category 3,Factor 1,110,100,120,Chart 2 8 | Category 1,Factor 2,620,600,630,Chart 1 9 | Category 2,Factor 2,370,360,380,Chart 1 10 | Category 3,Factor 2,120,110,130,Chart 1 11 | Category 1,Factor 2,630,610,640,Chart 2 12 | Category 2,Factor 2,380,370,390,Chart 2 13 | Category 3,Factor 2,130,120,140,Chart 2 14 | Category 1,Factor 3,640,620,650,Chart 1 15 | Category 2,Factor 3,390,380,400,Chart 1 16 | Category 3,Factor 3,140,130,150,Chart 1 17 | Category 1,Factor 3,650,630,660,Chart 2 18 | Category 2,Factor 3,400,390,410,Chart 2 19 | Category 3,Factor 3,150,140,160,Chart 2 20 | -------------------------------------------------------------------------------- /all-templates/small-multiple-line-category/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data-yeartodate-hospcarehome.csv", 4 | "colour_palette": [{ 5 | "key": "5 year average", 6 | "colour": "darkgrey" 7 | }, 8 | { 9 | "key": "2020", 10 | "colour": "#206095" 11 | } 12 | ], 13 | "categorySort": ["Hospital", "Care home", "Home"], 14 | "categorySortold": ["Hospital", "Care home", "Home","Hospice","Elsewhere","Other communal establishment"], 15 | "sourceText": ["Office for National Statistics"], 16 | "xAxisLabel": "Amount", 17 | "yAxisLabel": "Regions and Countries", 18 | "yAxisScale": "auto_zero_max_total" 19 | }, 20 | "optional": { 21 | "margin": { 22 | "sm": { 23 | "top": 30, 24 | "right": 20, 25 | "bottom": 45, 26 | "left": 50 27 | }, 28 | "md": { 29 | "top": 30, 30 | "right": 20, 31 | "bottom": 50, 32 | "left": 50 33 | }, 34 | "lg": { 35 | "top": 30, 36 | "right": 30, 37 | "bottom": 45, 38 | "left": 40 39 | } 40 | }, 41 | "chart_every":{ 42 | "sm": 1, 43 | "md": 2, 44 | "lg": 3 45 | }, 46 | "aspectRatio": { 47 | "sm": [16, 8], 48 | "md": [16, 8], 49 | "lg": [16, 10] 50 | }, 51 | 52 | "mobileBreakpoint": 414, 53 | "middleBreakpoint": 600, 54 | "x_ticks_every": { 55 | "sm": 1, 56 | "md": 3, 57 | "lg": 3 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /all-templates/small-multiple-line-category/data-yeartodate-hospcarehome.csv: -------------------------------------------------------------------------------- 1 | date,category,series,chiffre 2 | 1,Care home,5 year average,2756 3 | 2,Care home,5 year average,2917 4 | 3,Care home,5 year average,2968 5 | 4,Care home,5 year average,2850 6 | 5,Care home,5 year average,2805 7 | 6,Care home,5 year average,2626 8 | 7,Care home,5 year average,2659 9 | 8,Care home,5 year average,2603 10 | 9,Care home,5 year average,2540 11 | 10,Care home,5 year average,2536 12 | 11,Care home,5 year average,2443 13 | 12,Care home,5 year average,2331 14 | 13,Care home,5 year average,2280 15 | 14,Care home,5 year average,2212 16 | 15,Care home,5 year average,2180 17 | 16,Care home,5 year average,2154 18 | 1,Home,5 year average,2890 19 | 2,Home,5 year average,2816 20 | 3,Home,5 year average,2752 21 | 4,Home,5 year average,2693 22 | 5,Home,5 year average,2740 23 | 6,Home,5 year average,2666 24 | 7,Home,5 year average,2636 25 | 8,Home,5 year average,2587 26 | 9,Home,5 year average,2604 27 | 10,Home,5 year average,2588 28 | 11,Home,5 year average,2505 29 | 12,Home,5 year average,2459 30 | 13,Home,5 year average,2403 31 | 14,Home,5 year average,2420 32 | 15,Home,5 year average,2381 33 | 16,Home,5 year average,2344 34 | 1,Hospital,5 year average,6230 35 | 2,Hospital,5 year average,6307 36 | 3,Hospital,5 year average,6052 37 | 4,Hospital,5 year average,5791 38 | 5,Hospital,5 year average,5695 39 | 6,Hospital,5 year average,5559 40 | 7,Hospital,5 year average,5544 41 | 8,Hospital,5 year average,5402 42 | 9,Hospital,5 year average,5349 43 | 10,Hospital,5 year average,5313 44 | 11,Hospital,5 year average,5171 45 | 12,Hospital,5 year average,5034 46 | 13,Hospital,5 year average,4971 47 | 14,Hospital,5 year average,4946 48 | 15,Hospital,5 year average,4922 49 | 16,Hospital,5 year average,4787 50 | 11,Care home,2020,2471 51 | 12,Care home,2020,2335 52 | 13,Care home,2020,2489 53 | 14,Care home,2020,3769 54 | 15,Care home,2020,4927 55 | 11,Home,2020,2725 56 | 12,Home,2020,2709 57 | 13,Home,2020,2786 58 | 14,Home,2020,3865 59 | 15,Home,2020,4117 60 | 11,Hospital,2020,4975 61 | 12,Hospital,2020,4770 62 | 13,Hospital,2020,5105 63 | 14,Hospital,2020,7884 64 | 15,Hospital,2020,8578 65 | 16,Home,2020,4570 66 | 16,Hospital,2020,9434 67 | 16,Care home,2020,7316 68 | -------------------------------------------------------------------------------- /all-templates/small-multiple-line/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "regions.csv", 4 | "dateFormat": "%d/%m/%Y", 5 | "displayTicksFormat":"%d %b", 6 | "colour_palette": [{ 7 | "key": "5-year average", 8 | "colour": "darkgrey" 9 | }, 10 | { 11 | "key": "All deaths", 12 | "colour": "#206095" 13 | }, 14 | { 15 | "key":"COVID-19 deaths", 16 | "colour":"#d32f2f" 17 | } 18 | ], 19 | "categorySort": { 20 | "on":true, 21 | "sortby":["South East","North West","East","West Midlands","London","Yorkshire and The Humber","South West","East Midlands","North East","Wales"] 22 | }, 23 | "sourceText": ["Office for National Statistics – Deaths registered weekly in England and Wales"], 24 | "xAxisLabel": "Week ending", 25 | "yAxisLabel": "Weekly Deaths", 26 | "yAxisScale": "auto_zero_max_total", 27 | "screenreadertext":"REPLACE ME" 28 | }, 29 | "optional": { 30 | "margin": { 31 | "sm": { 32 | "top": 30, 33 | "right": 23, 34 | "bottom": 45, 35 | "left": 50 36 | }, 37 | "md": { 38 | "top": 30, 39 | "right": 23, 40 | "bottom": 50, 41 | "left": 50 42 | }, 43 | "lg": { 44 | "top": 30, 45 | "right": 23, 46 | "bottom": 45, 47 | "left": 35 48 | } 49 | }, 50 | "chart_every":{ 51 | "sm": 1, 52 | "md": 2, 53 | "lg": 3 54 | }, 55 | "aspectRatio": { 56 | "sm": [16, 8], 57 | "md": [16, 8], 58 | "lg": [16, 10] 59 | }, 60 | "legendHeight":{ 61 | "sm": 45, 62 | "md": 30, 63 | "lg": 30 64 | }, 65 | 66 | "mobileBreakpoint": 480, 67 | "middleBreakpoint": 670, 68 | "x_ticks_every": { 69 | "sm": 7, 70 | "md": 7, 71 | "lg": 7 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /all-templates/small-multiple-line/datadownload.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-line/datadownload.xlsx -------------------------------------------------------------------------------- /all-templates/small-multiple-line/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-line/fallback.png -------------------------------------------------------------------------------- /all-templates/small-multiple-stacked-area/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "screenreadertext":"Deaths with the highest age specific rates (10 to 24-year-olds and 45 to 64-year-olds) have seen the greatest increases in hanging.", 5 | "dateFormat": "%Y", 6 | "displayTicksFormat":"%Y", 7 | "colour_palette": [{ 8 | "key": "Hanging, strangulation and suffocation", 9 | "colour": "#206095" 10 | }, 11 | { 12 | "key": "Poisoning", 13 | "colour": "#118C7B" 14 | }, 15 | { 16 | "key": "Jumping or lying before moving object", 17 | "colour": "#003C57" 18 | }, 19 | { 20 | "key": "Drowning", 21 | "colour": "#A8BD3A" 22 | }, 23 | { 24 | "key": "Fall and Fracture", 25 | "colour": "#27A0CC" 26 | }, 27 | { 28 | "key": "Sharp object", 29 | "colour": "#871A5B" 30 | }, 31 | { 32 | "key": "Other", 33 | "colour": "#F66068" 34 | } 35 | ], 36 | "categorySort": [], 37 | "sourceText": ["Office for National Statistics"], 38 | "xAxisLabel": "", 39 | "yAxisLabel": "%", 40 | "yAxisScale": "auto_zero_max_total" 41 | }, 42 | "optional": { 43 | "margin": { 44 | "sm": { 45 | "top": 25, 46 | "right": 30, 47 | "bottom": 45, 48 | "left": 23 49 | }, 50 | "md": { 51 | "top": 25, 52 | "right": 23, 53 | "bottom": 45, 54 | "left": 23 55 | }, 56 | "lg": { 57 | "top": 25, 58 | "right": 15, 59 | "bottom": 25, 60 | "left": 23 61 | } 62 | }, 63 | "chart_every":{ 64 | "sm": 1, 65 | "md": 3, 66 | "lg": 3 67 | }, 68 | "aspectRatio": { 69 | "sm": [16, 13], 70 | "md": [16, 13], 71 | "lg": [16, 15] 72 | }, 73 | "legendHeight":{ 74 | "sm": 115, 75 | "md": 80, 76 | "lg": 60 77 | }, 78 | "legendStyle": "rect", 79 | 80 | "mobileBreakpoint": 480, 81 | "middleBreakpoint": 645, 82 | "x_ticks_every": { 83 | "sm": 8, 84 | "md": 8, 85 | "lg": 8 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /all-templates/small-multiple-stacked-area/datadownload.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-stacked-area/datadownload.xlsx -------------------------------------------------------------------------------- /all-templates/small-multiple-stacked-bar-vertical/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "diffbyage.csv", 4 | "sort_data": false, 5 | "colour_palette": [{ 6 | "key": "All other causes", 7 | "colour": "darkgrey" 8 | }, 9 | { 10 | "key": "Deaths associated with COVID19", 11 | "colour": "#206095" 12 | } 13 | ], 14 | "legendLabels": ["All other causes", "Deaths associated with COVID19"], 15 | "legendStyle":"rect", 16 | "sourceText": "Office for National Statistics", 17 | "xAxisLabel":"Week number", 18 | "yAxisLabel": "Weekly deaths above or below 5 year average", 19 | "yAxisScale": "auto_min_max", 20 | "mediumBreakpoint": 600, 21 | "mobileBreakpoint": 414 22 | }, 23 | "optional": { 24 | "margin": { 25 | "sm": { 26 | "top": 15, 27 | "right": 20, 28 | "bottom": 40, 29 | "left": 40 30 | }, 31 | "md": { 32 | "top": 15, 33 | "right": 20, 34 | "bottom": 40, 35 | "left": 35 36 | }, 37 | "lg": { 38 | "top": 15, 39 | "right": 20, 40 | "bottom": 40, 41 | "left": 35 42 | } 43 | }, 44 | 45 | "aspectRatio": { 46 | "sm": [16, 8], 47 | "md": [16, 8], 48 | "lg": [16, 8] 49 | }, 50 | "chart_every":{ 51 | "sm": 1, 52 | "md": 2, 53 | "lg": 3 54 | }, 55 | 56 | "x_ticks_every": { 57 | "sm": 1, 58 | "md": 2, 59 | "lg": 3 60 | }, 61 | "y_num_ticks": { 62 | "sm": 4, 63 | "md": 4, 64 | "lg": 4 65 | }, 66 | "centre_line": false, 67 | "centre_line_value": 0 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /all-templates/small-multiple-stacked-bar-vertical/databyagefiltered.csv: -------------------------------------------------------------------------------- 1 | category,date,Other deaths,COVID deaths 2 | 50-54,1,-12,0 3 | 55-59,1,-1,0 4 | 60-64,1,-28,0 5 | 65-69,1,-105,0 6 | 70-74,1,35,0 7 | 75-79,1,44,0 8 | 80-84,1,55,0 9 | 85-89,1,80,0 10 | 90+,1,68,0 11 | 50-54,2,-13,0 12 | 55-59,2,23,0 13 | 60-64,2,31,0 14 | 65-69,2,-65,0 15 | 70-74,2,70,0 16 | 75-79,2,105,0 17 | 80-84,2,26,0 18 | 85-89,2,47,0 19 | 90+,2,39,0 20 | 50-54,3,27,0 21 | 55-59,3,82,0 22 | 60-64,3,9,0 23 | 65-69,3,-57,0 24 | 70-74,3,15,0 25 | 75-79,3,20,0 26 | 80-84,3,-7,0 27 | 85-89,3,-119,0 28 | 90+,3,-220,0 29 | 50-54,4,8,0 30 | 55-59,4,-6,0 31 | 60-64,4,2,0 32 | 65-69,4,-42,0 33 | 70-74,4,16,0 34 | 75-79,4,-48,0 35 | 80-84,4,-188,0 36 | 85-89,4,-227,0 37 | 90+,4,-411,0 38 | 50-54,5,10,0 39 | 55-59,5,24,0 40 | 60-64,5,3,0 41 | 65-69,5,-49,0 42 | 70-74,5,94,0 43 | 75-79,5,-2,0 44 | 80-84,5,-174,0 45 | 85-89,5,-209,0 46 | 90+,5,-250,0 47 | 50-54,6,24,0 48 | 55-59,6,3,0 49 | 60-64,6,-10,0 50 | 65-69,6,-110,0 51 | 70-74,6,13,0 52 | 75-79,6,-43,0 53 | 80-84,6,-221,0 54 | 85-89,6,-163,0 55 | 90+,6,-347,0 56 | 50-54,7,17,0 57 | 55-59,7,-32,0 58 | 60-64,7,-28,0 59 | 65-69,7,-133,0 60 | 70-74,7,48,0 61 | 75-79,7,-106,0 62 | 80-84,7,-185,0 63 | 85-89,7,-137,0 64 | 90+,7,-80,0 65 | 50-54,8,-27,0 66 | 55-59,8,-13,0 67 | 60-64,8,-9,0 68 | 65-69,8,-56,0 69 | 70-74,8,-6,0 70 | 75-79,8,-36,0 71 | 80-84,8,-175,0 72 | 85-89,8,-254,0 73 | 90+,8,-173,0 74 | 50-54,9,2,0 75 | 55-59,9,0,0 76 | 60-64,9,2,0 77 | 65-69,9,-63,0 78 | 70-74,9,56,0 79 | 75-79,9,-102,0 80 | 80-84,9,-96,0 81 | 85-89,9,-67,0 82 | 90+,9,-120,0 83 | 50-54,10,0,0 84 | 55-59,10,-2,0 85 | 60-64,10,-31,0 86 | 65-69,10,-82,0 87 | 70-74,10,2,0 88 | 75-79,10,-68,0 89 | 80-84,10,-68,0 90 | 85-89,10,-180,0 91 | 90+,10,-186,0 92 | 50-54,11,10,0 93 | 55-59,11,43,0 94 | 60-64,11,-14,1 95 | 65-69,11,-62,0 96 | 70-74,11,26,1 97 | 75-79,11,32,2 98 | 80-84,11,-78,1 99 | 85-89,11,-160,0 100 | 90+,11,-18,0 101 | 50-54,12,-4,2 102 | 55-59,12,37,2 103 | 60-64,12,-16,2 104 | 65-69,12,-44,11 105 | 70-74,12,92,9 106 | 75-79,12,66,11 107 | 80-84,12,-26,20 108 | 85-89,12,-47,24 109 | 90+,12,-60,21 110 | 50-54,13,-9,9 111 | 55-59,13,37,16 112 | 60-64,13,44,30 113 | 65-69,13,-11,42 114 | 70-74,13,69,57 115 | 75-79,13,78,84 116 | 80-84,13,79,97 117 | 85-89,13,54,102 118 | 90+,13,149,86 119 | 50-54,14,76,64 120 | 55-59,14,65,137 121 | 60-64,14,103,169 122 | 65-69,14,117,224 123 | 70-74,14,306,402 124 | 75-79,14,360,549 125 | 80-84,14,497,682 126 | 85-89,14,471,617 127 | 90+,14,616,546 128 | 50-54,15,52,126 129 | 55-59,15,46,208 130 | 60-64,15,47,333 131 | 65-69,15,3,427 132 | 70-74,15,85,677 133 | 75-79,15,191,973 134 | 80-84,15,246,1237 135 | 85-89,15,517,1091 136 | 90+,15,635,992 137 | 50-54,16,-15,190 138 | 55-59,16,45,287 139 | 60-64,16,48,413 140 | 65-69,16,-14,553 141 | 70-74,16,235,889 142 | 75-79,16,331,1197 143 | 80-84,16,510,1637 144 | 85-89,16,762,1739 145 | 90+,16,1249,1674 146 | -------------------------------------------------------------------------------- /all-templates/small-multiple-stacked-bar-vertical/diffbyage.csv: -------------------------------------------------------------------------------- 1 | category,date,Other deaths,COVID deaths 2 | 50-54,1,-12,0 3 | 55-59,1,-1,0 4 | 60-64,1,-28,0 5 | 65-69,1,-105,0 6 | 70-74,1,35,0 7 | 75-79,1,44,0 8 | 80-84,1,55,0 9 | 85-89,1,80,0 10 | 90+,1,68,0 11 | 50-54,2,-13,0 12 | 55-59,2,23,0 13 | 60-64,2,31,0 14 | 65-69,2,-65,0 15 | 70-74,2,70,0 16 | 75-79,2,105,0 17 | 80-84,2,26,0 18 | 85-89,2,47,0 19 | 90+,2,39,0 20 | 50-54,3,27,0 21 | 55-59,3,82,0 22 | 60-64,3,9,0 23 | 65-69,3,-57,0 24 | 70-74,3,15,0 25 | 75-79,3,20,0 26 | 80-84,3,-7,0 27 | 85-89,3,-119,0 28 | 90+,3,-220,0 29 | 50-54,4,8,0 30 | 55-59,4,-6,0 31 | 60-64,4,2,0 32 | 65-69,4,-42,0 33 | 70-74,4,16,0 34 | 75-79,4,-48,0 35 | 80-84,4,-188,0 36 | 85-89,4,-227,0 37 | 90+,4,-411,0 38 | 50-54,5,10,0 39 | 55-59,5,24,0 40 | 60-64,5,3,0 41 | 65-69,5,-49,0 42 | 70-74,5,94,0 43 | 75-79,5,-2,0 44 | 80-84,5,-174,0 45 | 85-89,5,-209,0 46 | 90+,5,-250,0 47 | 50-54,6,24,0 48 | 55-59,6,3,0 49 | 60-64,6,-10,0 50 | 65-69,6,-110,0 51 | 70-74,6,13,0 52 | 75-79,6,-43,0 53 | 80-84,6,-221,0 54 | 85-89,6,-163,0 55 | 90+,6,-347,0 56 | 50-54,7,17,0 57 | 55-59,7,-32,0 58 | 60-64,7,-28,0 59 | 65-69,7,-133,0 60 | 70-74,7,48,0 61 | 75-79,7,-106,0 62 | 80-84,7,-185,0 63 | 85-89,7,-137,0 64 | 90+,7,-80,0 65 | 50-54,8,-27,0 66 | 55-59,8,-13,0 67 | 60-64,8,-9,0 68 | 65-69,8,-56,0 69 | 70-74,8,-6,0 70 | 75-79,8,-36,0 71 | 80-84,8,-175,0 72 | 85-89,8,-254,0 73 | 90+,8,-173,0 74 | 50-54,9,2,0 75 | 55-59,9,0,0 76 | 60-64,9,2,0 77 | 65-69,9,-63,0 78 | 70-74,9,56,0 79 | 75-79,9,-102,0 80 | 80-84,9,-96,0 81 | 85-89,9,-67,0 82 | 90+,9,-120,0 83 | 50-54,10,0,0 84 | 55-59,10,-2,0 85 | 60-64,10,-31,0 86 | 65-69,10,-82,0 87 | 70-74,10,2,0 88 | 75-79,10,-68,0 89 | 80-84,10,-68,0 90 | 85-89,10,-180,0 91 | 90+,10,-186,0 92 | 50-54,11,10,0 93 | 55-59,11,43,0 94 | 60-64,11,-14,1 95 | 65-69,11,-62,0 96 | 70-74,11,26,1 97 | 75-79,11,32,2 98 | 80-84,11,-78,1 99 | 85-89,11,-160,0 100 | 90+,11,-18,0 101 | 50-54,12,-4,2 102 | 55-59,12,37,2 103 | 60-64,12,-16,2 104 | 65-69,12,-44,11 105 | 70-74,12,92,9 106 | 75-79,12,66,11 107 | 80-84,12,-26,20 108 | 85-89,12,-47,24 109 | 90+,12,-60,21 110 | 50-54,13,-9,9 111 | 55-59,13,37,16 112 | 60-64,13,44,30 113 | 65-69,13,-11,42 114 | 70-74,13,69,57 115 | 75-79,13,78,84 116 | 80-84,13,79,97 117 | 85-89,13,54,102 118 | 90+,13,149,86 119 | 50-54,14,76,64 120 | 55-59,14,65,137 121 | 60-64,14,103,169 122 | 65-69,14,117,224 123 | 70-74,14,306,402 124 | 75-79,14,360,549 125 | 80-84,14,497,682 126 | 85-89,14,471,617 127 | 90+,14,616,546 128 | 50-54,15,52,126 129 | 55-59,15,46,208 130 | 60-64,15,47,333 131 | 65-69,15,3,427 132 | 70-74,15,85,677 133 | 75-79,15,191,973 134 | 80-84,15,246,1237 135 | 85-89,15,517,1091 136 | 90+,15,635,992 137 | 50-54,16,-15,190 138 | 55-59,16,45,287 139 | 60-64,16,48,413 140 | 65-69,16,-14,553 141 | 70-74,16,235,889 142 | 75-79,16,331,1197 143 | 80-84,16,510,1637 144 | 85-89,16,762,1739 145 | 90+,16,1249,1674 146 | -------------------------------------------------------------------------------- /all-templates/small-multiple-stacked-bar-vertical/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiple-stacked-bar-vertical/fallback.png -------------------------------------------------------------------------------- /all-templates/small-multiples-grouped-column/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiples-grouped-column/Thumbs.db -------------------------------------------------------------------------------- /all-templates/small-multiples-grouped-column/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "colour_palette": [ 5 | { 6 | "key": "Disabled people", 7 | "colour": "#27A0CC" 8 | },{ 9 | "key": "Non-disabled people", 10 | "colour": "#206095" 11 | } 12 | ], 13 | "categorySort": ["Cardiovascular disease","Metabolic","East","Respiratory","Cancer","Musculoskeletal","Renal","Renal","Mental/behavioural","Neurological"], 14 | "sourceText": ["Office for National Statistics - Annual Population Survey"], 15 | "xAxisLabel": "%", 16 | "yAxisLabel": "Regions and Countries", 17 | "yAxisScale": "auto_zero_max_total" 18 | }, 19 | "optional": { 20 | "margin": { 21 | "sm": { 22 | "top": 15, 23 | "right": 15, 24 | "bottom": 40, 25 | "left": 20 26 | }, 27 | "md": { 28 | "top": 15, 29 | "right": 20, 30 | "bottom": 40, 31 | "left": 20 32 | }, 33 | "lg": { 34 | "top": 15, 35 | "right": 20, 36 | "bottom": 40, 37 | "left": 20 38 | } 39 | }, 40 | "margin_special_left":53, 41 | "chart_every":{ 42 | "sm": 1, 43 | "md": 2, 44 | "lg": 3 45 | }, 46 | "aspectRatio": { 47 | "sm": [10, 8], 48 | "md": [10, 8], 49 | "lg": [10, 8] 50 | }, 51 | "legendHeight":{ 52 | "sm": 45, 53 | "md": 45, 54 | "lg": 45 55 | }, 56 | 57 | "mobileBreakpoint": 480, 58 | "middleBreakpoint": 670, 59 | "y_num_ticks":{ 60 | "sm":6, 61 | "md":6, 62 | "lg":6 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /all-templates/small-multiples-grouped-column/data.csv: -------------------------------------------------------------------------------- 1 | date,series,chiffre,lower,upper,category 2 | 2018-19,A,0.857818346,0.650996666,3.685008538,21-24 3 | 2019-20,A,6.381306193,3.922659003,7.271019802,21-24 4 | 2020-21,A,18.71988325,17.55821121,23.1233808,21-24 5 | 2018-19,A,12.71114199,11.83420558,14.46433358,25-29 6 | 2019-20,A,9.153393788,8.442595224,14.12197456,25-29 7 | 2020-21,A,3.27982208,-1.565901672,7.006140317,25-29 8 | 2018-19,A,15.19936097,13.09590841,15.83246985,30-34 9 | 2019-20,A,2.817104808,1.794821437,7.092676362,30-34 10 | 2020-21,A,3.521742786,-0.097961946,6.505325644,30-34 11 | 2018-19,A,6.596628233,4.081821798,10.92877338,35-39 12 | 2019-20,A,1.480440208,-1.663787153,3.955409951,35-39 13 | 2020-21,A,4.418966364,3.937894004,4.545447755,35-39 14 | 2018-19,A,17.01879746,15.33881323,20.06022749,40-44 15 | 2019-20,A,11.98335933,11.67843202,16.84934079,40-44 16 | 2020-21,A,10.9138076,9.56489827,12.73966349,40-44 17 | 2018-19,A,4.650179647,3.712920947,5.28027723,45-49 18 | 2019-20,A,8.482847666,4.047234594,11.18150188,45-49 19 | 2020-21,A,11.63743085,8.982268533,15.4815248,45-49 20 | 2018-19,A,5.806359665,5.033814771,6.441133879,50-54 21 | 2019-20,A,13.46387514,13.0447748,14.79457916,50-54 22 | 2020-21,A,10.59303437,5.712674418,12.16293299,50-54 23 | 2018-19,A,16.10393159,15.058997,20.93560296,55-59 24 | 2019-20,A,18.28831102,15.93745958,19.71814841,55-59 25 | 2020-21,A,7.33178718,6.752380875,9.241645134,55-59 26 | 2018-19,A,4.359603828,2.68172335,5.103158933,60-64 27 | 2019-20,A,2.933437778,2.369383043,4.404659858,60-64 28 | 2020-21,A,7.604183574,7.243914076,8.599878642,60-64 29 | 2018-19,B,9.326343156,7.752870377,10.74940092,21-24 30 | 2019-20,B,5.104902012,4.562652877,7.255853646,21-24 31 | 2020-21,B,14.77414734,11.35418901,17.17579991,21-24 32 | 2018-19,B,4.431262223,0.594464049,6.106959362,25-29 33 | 2019-20,B,5.07425586,1.187543645,6.21913601,25-29 34 | 2020-21,B,5.579314681,5.427893278,10.3670049,25-29 35 | 2018-19,B,2.841757052,-1.778072219,7.185685762,30-34 36 | 2019-20,B,4.360515673,1.260188077,4.794565388,30-34 37 | 2020-21,B,13.99229713,12.49736293,14.19557503,30-34 38 | 2018-19,B,14.89396587,12.09319318,18.8613389,35-39 39 | 2019-20,B,0.830605101,0.543252331,2.589863323,35-39 40 | 2020-21,B,8.513985668,4.734199708,12.21497054,35-39 41 | 2018-19,B,7.518906447,6.468710203,11.68457597,40-44 42 | 2019-20,B,3.749905196,2.958785187,7.673291883,40-44 43 | 2020-21,B,13.00068042,9.969145084,14.14454111,40-44 44 | 2018-19,B,4.34212431,1.02600312,8.527408032,45-49 45 | 2019-20,B,4.492126087,2.382137714,6.604703251,45-49 46 | 2020-21,B,11.00081306,8.498258477,11.51454372,45-49 47 | 2018-19,B,14.17195996,13.95924206,16.89714926,50-54 48 | 2019-20,B,7.908396862,5.620349995,9.612296828,50-54 49 | 2020-21,B,16.85858033,13.59876769,19.28237957,50-54 50 | 2018-19,B,8.749233741,6.213797734,11.86937632,55-59 51 | 2019-20,B,6.123765485,6.069339927,7.876543962,55-59 52 | 2020-21,B,1.833831722,-2.317357825,6.174032994,55-59 53 | 2018-19,B,13.8801902,9.072862799,17.66359541,60-64 54 | 2019-20,B,5.157620515,1.480429393,7.957937265,60-64 55 | 2020-21,B,13.837342,8.983788563,18.08143437,60-64 56 | -------------------------------------------------------------------------------- /all-templates/small-multiples-stacked-bar/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | 5 | "sort_data": false, 6 | "numbercolumns_sm_md_lg": [2,4,4], 7 | 8 | "colour_palette": ["#0075A3","#E2BC22","#ccc","#234D70"], 9 | 10 | "dateFormat":"", 11 | "legendLabels" : ["Social Rent","Other sub-market Rent","Rent to own","Shared ownership/equity"], 12 | 13 | 14 | "sourceText":["Affordable housing within the United Kingdom: 2008 to 2018, Office for National Statistics"], 15 | "sourceURL":["http://www.ons.gov.uk/ons/publications/re-reference-tables.html?edition=tcm%3A77-350752"], 16 | 17 | "annotationChart": [ 18 | "Lorem ipsum dolor sit amet", 19 | "adipiscing elit sed do eiusmod" 20 | ], 21 | "annotationBullet": [ 22 | "Lorem ipsum dolor sit amet", 23 | "adipiscing elit sed do eiusmod" 24 | ], 25 | "annotationXY":[ 26 | ["Light rail and tram ","68.4"], 27 | ["Underground","20"] 28 | ], 29 | "annotationAlign":[ 30 | "middle", 31 | "middle" 32 | ], 33 | 34 | "circles" : false, 35 | "annotationCXCY":[ 36 | ["Rail","68.4"], 37 | ["Underground","73"] 38 | ], 39 | 40 | "yAxisLabel":"%", 41 | "yAxisScale":[0,100], 42 | "yAxisBreak": true, 43 | "yAxisBreak_sm_md_lg": [65,65,65] 44 | }, 45 | "optional" : { 46 | "margin_sm": [0, 0, 0, 20], 47 | "margin_md": [0, 0, 0, 20], 48 | "margin_lg": [0, 0, 0, 20], 49 | 50 | "innersm":[50 , 0 , 40 , 30 ], 51 | "innermd":[60 , 0 , 50 , 30 ], 52 | "innerlg":[50 , 0 , 50 , 30 ], 53 | 54 | "aspectRatio_sm" : [16,25], 55 | "aspectRatio_md" : [16,30], 56 | "aspectRatio_lg" : [16,40], 57 | 58 | "mobileBreakpoint" : 610, 59 | 60 | "xAxisTextFormat_sm_md_lg" : ["%y", "%Y", "%b %y"], 61 | 62 | "x_num_ticks_sm_md_lg" : [4,2,2], 63 | "y_num_ticks_sm_md_lg" : [4,5,5], 64 | "centre_line" : false, 65 | "centre_line_value" : 0 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /all-templates/small-multiples-stacked-bar/data.csv: -------------------------------------------------------------------------------- 1 | chart_title,group,Social Rent,Other sub-market Rent,Rent to own,Shared ownership/equity 2 | England,2010-11,64.75642951,0,7.403914834,27.83965566 3 | England,2017-18,13.65334012,57.99380358,1.720991427,26.62337662 4 | Wales,2010-11,80.36267138,4.201680672,0,15.43564794 5 | Wales,2017-18,79.07928389,12.07161125,0.511508951,8.337595908 6 | Scotland,2010-11,80.70806251,0.802102061,0,18.48983543 7 | Scotland,2017-18,61.70611671,13.27630654,0,25.01757675 8 | Northern Ireland,2010-11,74.1188848,0,0,25.8811152 9 | Northern Ireland,2017-18,65.23809524,0,0,34.76190476 10 | -------------------------------------------------------------------------------- /all-templates/small-multiples-stacked-bar/datadownload.csv: -------------------------------------------------------------------------------- 1 | age group,decade,Other Cash Benefits,National Health Service,Education,State Pension,Other Benefits-in-Kind,Taxes,Net Position 2 | 20-24,'50s,1981.034879,1455.174511,916.8163316,191.9943014,522.8735336,-7660.895206,-2593.001651 3 | 20-24,'60s,3250.545208,1731.369343,1957.632282,273.52101,395.4898369,-8570.678103,-962.120423 4 | 20-24,'70s,4071.674766,2156.454568,3537.22924,1.0760437,281.5308996,-9058.85896,989.1065573 5 | 20-24,'80s,4746.804339,3385.835623,4684.562651,8.1740342,331.6187166,-9108.300774,4048.69459 6 | 20-24,'90s,4840.954517,3309.936267,3283.811232,3.4826538,362.5119747,-7676.154457,4124.542187 7 | 25-34,'50s,2302.630913,1588.395899,1769.175201,217.2260241,363.8334422,-9208.350068,-2967.088589 8 | 25-34,'60s,3028.569811,2163.872397,2232.103764,19.7416045,236.5439237,-11876.6039,-4195.772402 9 | 25-34,'70s,3928.790656,3055.534299,3085.050175,28.4372799,244.6950478,-14666.83765,-4324.330194 10 | 25-34,'80s,4672.378255,3507.135851,3419.963071,27.9703511,310.951524,-13010.40141,-1072.002354 11 | 35-44,'40s,2039.178813,1296.769176,2678.701554,181.114207,320.0175787,-9758.484499,-3242.70317 12 | 35-44,'50s,2639.791513,1757.805759,3448.831828,57.9979855,189.2770972,-12344.65337,-4250.949192 13 | 35-44,'60s,3553.377637,2635.873555,4804.790747,48.4747672,184.8189379,-14634.04107,-3406.705431 14 | 35-44,'70s,4167.874799,3234.525053,5584.150623,58.0417656,246.7517566,-14929.93311,-1638.589115 15 | 45-54,'30s,2016.262961,1261.360568,1709.216382,266.8391011,321.758792,-10623.15694,-5047.719136 16 | 45-54,'40s,2296.473784,1728.210058,1979.793058,116.5118157,151.260363,-14447.14304,-8174.893963 17 | 45-54,'50s,2633.439024,2532.186996,3056.194027,130.075443,161.3816354,-16197.79968,-7684.522559 18 | 45-54,'60s,3136.719277,3136.494042,4045.280442,135.3110714,196.7354004,-15919.59307,-5269.052839 19 | 55-64,'20s,2428.153897,1466.97801,594.2867648,1060.28508,365.2151864,-9586.684655,-3671.765717 20 | 55-64,'30s,3310.057717,2058.561749,545.1291777,1191.125358,157.6124686,-11727.87075,-4465.384279 21 | 55-64,'40s,2913.5481,2858.076366,784.8388127,1743.984198,164.7093381,-15087.85054,-6622.693726 22 | 55-64,'50s,2565.937094,3245.801909,1180.342877,1065.779782,173.3553868,-15960.92273,-7729.705683 23 | 65+,'20s,2550.950256,7058.64503,111.4019165,9055.346691,231.1552325,-6602.093956,12405.40517 24 | 65+,'30s,2340.253691,6356.39633,217.9937781,10512.2425,220.0010569,-8608.725007,11038.16235 25 | 65+,'40s,2087.178196,5838.316164,310.455035,10899.0913,232.0968881,-11158.0481,8209.089479 26 | -------------------------------------------------------------------------------- /all-templates/small-multiples-stacked-bar/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/small-multiples-stacked-bar/fallback.png -------------------------------------------------------------------------------- /all-templates/split-bar-multiple/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "colour_palette": ["#0075A3", "#266D4A", "#234D70", "#601552"], 5 | "screenreadertext":"", 6 | "sourceText": ["Office for National Statistics"], 7 | "numberFormat":".0f", 8 | "xAxisScale": [-20, 20], 9 | "barHeight": { 10 | "sm": 30, 11 | "md": 30, 12 | "lg": 40 13 | }, 14 | "margin":{ 15 | "sm":{"top":20,"right":0,"bottom":25,"left":130}, 16 | "md":{"top":20,"right":0,"bottom":25,"left":130}, 17 | "lg":{"top":20,"right":0,"bottom":25,"left":130} 18 | } 19 | }, 20 | "optional": { 21 | "mobileBreakpoint": 414, 22 | "middleBreakpoint": 600 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /all-templates/split-bar-multiple/data.csv: -------------------------------------------------------------------------------- 1 | category,xcategory,ycategory,amount 2 | Education,Degree,Associate professional and technical,1 3 | Education,Higher,Associate professional and technical,7 4 | Education,A-level,Associate professional and technical,3 5 | Education,GCSE,Associate professional and technical,5 6 | Education,Degree,Administrative and secretarial,7 7 | Education,Higher,Administrative and secretarial,20 8 | Education,A-level,Administrative and secretarial,0 9 | Education,GCSE,Administrative and secretarial,3 10 | Work,Degree,Hard worker,6 11 | Work,Higher,Hard worker,7 12 | Work,A-level,Hard worker,3 13 | Work,GCSE,Hard worker,8 14 | Work,Degree,Extra hard worker,4 15 | Work,Higher,Extra hard worker,3 16 | Work,A-level,Extra hard worker,3 17 | Work,GCSE,Extra hard worker,-20 18 | -------------------------------------------------------------------------------- /all-templates/split-bar-multiple/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/split-bar-multiple/fallback.png -------------------------------------------------------------------------------- /all-templates/split-bar-varied-xscales/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | "colour_palette":["#206095"], 5 | "accessibleSummary":"Description of what the chart is showing....", 6 | "sourceText":["Office for National Statistics - Annual Population Survey"], 7 | "sourceURL":[""], 8 | "xAxisScale":[[-1,1],[-20,100],[-2000, 25000]], 9 | "average_line":[-0.1,1,2000], 10 | "columnTitles": ["Measure 1 (%)", "Measure 2","Measure 3"], 11 | "columnFormats": [".0%", ",.3r",",.0f"], 12 | "barHeight_sm_md_lg" : [30,40,50], 13 | "legendLabel" : [""] 14 | 15 | 16 | }, 17 | "optional" : { 18 | "margin_sm": [8, 0, 25, 140], 19 | "margin_md": [8, 0, 25, 130], 20 | "mobileBreakpoint" : 610 21 | 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /all-templates/split-bar-varied-xscales/data.csv: -------------------------------------------------------------------------------- 1 | ycategory,xcategory,amount 2 | Category A,Measure 1,0.35 3 | Category A,Measure 2,10.2987 4 | Category A,Measure 3,10023 5 | Category B,Measure 1,1 6 | Category B,Measure 2,-19.2323 7 | Category B,Measure 3,23113 8 | Category C,Measure 1,0.75 9 | Category C,Measure 2,55.3229 10 | Category C,Measure 3,5004 11 | Category D,Measure 1,-0.83 12 | Category D,Measure 2,67.4752 13 | Category D,Measure 3,-1500 -------------------------------------------------------------------------------- /all-templates/split-bar-varied-xscales/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/split-bar-varied-xscales/fallback.png -------------------------------------------------------------------------------- /all-templates/split-bar-varied-xscales/occs.csv: -------------------------------------------------------------------------------- 1 | soc,ycategory,score,risk,xcategory,amount,sample_female,sample_age,sample_bame,, 2 | 6143,Arab,98.75,VH,bame_per, 0.06 ,1,0,1,, 3 | 6143,Arab,98.75,VH,earnings, 10.00 ,0,0,0,, 4 | 2215,Bangladeshi,93.5,VH,bame_per, 0.28 ,0,0,0,, 5 | 2215,Bangladeshi,93.5,VH,earnings, 8.00 ,0,0,0,, 6 | 2232,Black African,93,VH,bame_per, 0.11 ,0,0,1,, 7 | 2232,Black African,93,VH,earnings, 17.00 ,0,0,0,, 8 | 3213,Black Caribbean,93,VH,bame_per, 0.10 ,0,0,0,, 9 | 3213,Black Caribbean,93,VH,earnings, 14.00 ,0,0,0,, 10 | 6142,Chinese,93,VH,bame_per,-0.41 ,0,0,1,, 11 | 6142,Chinese,93,VH,earnings, 12.00 ,0,0,0,, 12 | 2231,Indian,91.75,VH,earnings, 13.00 ,0,0,0,, 13 | 2231,Indian,90.75,VH,bame_per, 0.19 ,0,0,0,, 14 | 2211,Other Asian background,90.1875,VH,bame_per, 0.28 ,0,0,0,, 15 | 2211,Other Asian background,90.1875,VH,earnings, 16.00 ,0,0,0,, 16 | 2216,Other Black,90,VH,bame_per, 0.20 ,0,0,0,, 17 | 2216,Other Black,90,VH,earnings, 15.00 ,0,0,0,, 18 | 6144,Other ethnic group,89.35714286,VH,bame_per, 0.10 ,0,0,1,, 19 | 6144,Other ethnic group,89.35714286,VH,earnings, 11.00 ,0,0,0,, 20 | 6147,Other mixed,89.35714286,VH,bame_per, 0.06 ,0,0,1,, 21 | 6147,Other mixed,89.35714286,VH,earnings, 17.00 ,0,0,0,, 22 | 2217,Other White,89.25,VH,bame_per, 0.20 ,0,0,1,, 23 | 2217,Other White,89.25,VH,earnings, 14.00 ,0,0,0,, 24 | 3218,Pakistani,89.25,VH,bame_per, 0.15 ,0,0,1,, 25 | 3218,Pakistani,89.25,VH,earnings, 14.00 ,0,0,0,, 26 | 6141,White and Asian,88.5,VH,bame_per, 0.19 ,0,0,0,, 27 | 6141,White and Asian,88.5,VH,earnings, 11.00 ,0,0,0,, 28 | 6131,White and Black African,83.5,VH,bame_per, 0.15 ,0,0,0,, 29 | 6131,White and Black African,83.5,VH,earnings, 18.00 ,0,0,0,, 30 | 2214,White and Black Caribbean,82.5,VH,bame_per, 0.27 ,0,0,1,, 31 | 2214,White and Black Caribbean,82.5,VH,earnings, 16.00 ,0,0,0,, 32 | 3314,White Irish,77.25,VH,bame_per,-0.23 ,0,0,1,, 33 | 3314,White Irish,77.25,VH,earnings, 9.00 ,0,0,0,, 34 | -------------------------------------------------------------------------------- /all-templates/split-bar-varied-xscales/wrapper.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Well-being dashboard 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | 32 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /all-templates/split-bar/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "colour_palette": ["#206095", "#118C7B", "#003C57", "#A8BD3A", "#27A0CC"], 5 | "accessibleSummary":"Description of what the chart is showing....", 6 | "sourceText":["Office for National Statistics - Annual Population Survey"], 7 | "numberFormat":".0f", 8 | "xAxisScale": [-25,100], 9 | "barHeight": { 10 | "sm": 30, 11 | "md": 30, 12 | "lg": 40 13 | }, 14 | "margin":{ 15 | "sm":{"top":8,"right":0,"bottom":25,"left":127}, 16 | "md":{"top":8,"right":0,"bottom":25,"left":127}, 17 | "lg":{"top":8,"right":0,"bottom":25,"left":127} 18 | } 19 | }, 20 | "optional": { 21 | "mobileBreakpoint": 414, 22 | "middleBreakpoint": 600 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /all-templates/split-bar/data.csv: -------------------------------------------------------------------------------- 1 | xcategory,ycategory,amount 2 | Degree,Associate professional and technical,1 3 | Higher,Associate professional and technical,7 4 | A-level,Associate professional and technical,13 5 | GCSE,Associate professional and technical,5 6 | Degree,Administrative and secretarial,74 7 | Higher,Administrative and secretarial,3 8 | A-level,Administrative and secretarial,0 9 | GCSE,Administrative and secretarial,3 10 | Degree,Skilled trades,7 11 | Higher,Skilled trades,10 12 | A-level,Skilled trades,23 13 | GCSE,Skilled trades,46 14 | Degree,Personal service,6 15 | Higher,Personal service,0 16 | A-level,Personal service,0 17 | GCSE,Personal service,2 18 | Degree,Sales and customer service,5 19 | Higher,Sales and customer service,-25 20 | A-level,Sales and customer service,-5 21 | GCSE,Sales and customer service,-3 22 | Degree,"Process, plant and machine",6 23 | Higher,"Process, plant and machine",80 24 | A-level,"Process, plant and machine",79 25 | GCSE,"Process, plant and machine",4 26 | -------------------------------------------------------------------------------- /all-templates/split-bar/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/split-bar/fallback.png -------------------------------------------------------------------------------- /all-templates/stacked-area/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | 5 | "dateFormat":"%Y", 6 | 7 | "legendLabels" : ["Lower skilled workers", "Upper skilled workers"], 8 | "legendStyle": "rect", 9 | "colour_palette": ["#206095", "#118C7B", "#003C57", "#A8BD3A", "27A0CC"], 10 | 11 | "sourceText":["Public sector employment, ONS"], 12 | "sourceURL":["https://www.ons.gov.uk/employmentandlabourmarket/peopleinwork/publicsectorpersonnel/bulletins/publicsectoremployment/previousReleases"], 13 | "draggable": false, 14 | "annotationsChart" : [ 15 | { 16 | "xVal": "1998-01-01T00:00:00.000Z", 17 | "yVal": 0.7, 18 | "path": "", 19 | "text": "53%", 20 | "textOffset": [0,0] 21 | }, 22 | { 23 | "xVal": "1998-01-01T00:00:00.000Z", 24 | "yVal": 0.2, 25 | "path": "", 26 | "text": "47%", 27 | "textOffset": [0,0] 28 | }, 29 | { 30 | "xVal": "2016-01-01T00:00:00.000Z", 31 | "yVal": 0.7, 32 | "path": "", 33 | "text": "64%", 34 | "textOffset": [0,0] 35 | }, 36 | { 37 | "xVal": "2016-01-01T00:00:00.000Z", 38 | "yVal": 0.20, 39 | "path": "", 40 | "text": "36%", 41 | "textOffset": [0,0] 42 | } 43 | 44 | ], 45 | "wordwrap":[30,20,10], 46 | "annoAlign": ["middle","middle","middle","middle"], 47 | "annotationBullet" : [], 48 | 49 | "circles" : false, 50 | "annotationCXCY":[ 51 | ], 52 | 53 | "yAxisLabel":"%", 54 | "yAxisScale":"auto_zero_max", 55 | "yAxisBreak": false, 56 | "yAxisBreak_sm_md_lg": [65,65,65] 57 | }, 58 | 59 | "optional" : { 60 | "margin_sm": [50, 10, 55, 40], 61 | "margin_md": [50, 10, 55, 40], 62 | "margin_lg": [50, 10, 10, 40], 63 | 64 | "aspectRatio_sm" : [16,13], 65 | "aspectRatio_md" : [16,12], 66 | "aspectRatio_lg" : [16,10], 67 | 68 | "mobileBreakpoint" : 610, 69 | 70 | "xAxisTextFormat_sm_md_lg" : ["%y", "%Y", "%Y"], 71 | 72 | "x_num_ticks_sm_md_lg" : [6,12,12], 73 | "y_num_ticks_sm_md_lg" : [5,5,5], 74 | 75 | "lineMarkers" : false, 76 | 77 | "vertical_line" : false, 78 | "annotateLineX1_Y1_X2_Y2" : [ [["Jul-00", "200"],["Jul-00", "0"]], [["Jul-08", "100"],["Jul-08", "200"]] ], 79 | 80 | "annotateRect" : false, 81 | "annotateRectX_Y" : [ [["Jan-94", 200],["Jan-96", 0]], [["Jul-04", 180],["Jul-06", 40]] ], 82 | "lineColor_opcty" : [["#ABCDEF", 0.2], ["#888", 0.4]], 83 | 84 | "centre_line" : false, 85 | "centre_line_value" : 0 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /all-templates/stacked-area/data.csv: -------------------------------------------------------------------------------- 1 | date,Lower,Upper 2 | 1997,0.468631623,0.531368377 3 | 1998,0.463584612,0.536415388 4 | 1999,0.467443918,0.532556082 5 | 2000,0.471523931,0.528476069 6 | 2001,0.481093157,0.518906843 7 | 2002,0.470202055,0.529797945 8 | 2003,0.474839575,0.525160425 9 | 2004,0.457389416,0.542610584 10 | 2005,0.450998896,0.549001104 11 | 2006,0.438154348,0.561845652 12 | 2007,0.439935858,0.560064142 13 | 2008,0.436888057,0.563111943 14 | 2009,0.435783113,0.564216887 15 | 2010,0.410106443,0.589893557 16 | 2011,0.410623933,0.589376067 17 | 2012,0.405673228,0.594326772 18 | 2013,0.392356259,0.607643741 19 | 2014,0.377497133,0.622502867 20 | 2015,0.372431036,0.627568964 21 | 2016,0.36539778,0.63460222 22 | 2017,0.364388573,0.635611427 -------------------------------------------------------------------------------- /all-templates/stacked-area/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/stacked-area/fallback.png -------------------------------------------------------------------------------- /all-templates/stacked-bar-horizontal/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | 5 | "sort_data": false, 6 | 7 | "colour_palette": ["#206095", "#118C7B", "#003C57", "#A8BD3A", "27A0CC"], 8 | 9 | "dateFormat": "", 10 | 11 | "legendLabels": ["Under occupied", "Standard occupied", "Over occupied"], 12 | 13 | "sourceText": ["2011 Census, Office for National Statistics"], 14 | "sourceURL": ["http://www.ons.gov.uk/ons/rel/census/2011-census-analysis/overcrowding-and-under-occupation-in-england-and-wales/index.html"], 15 | 16 | "annotationChart": ["Example annotation"], 17 | "annotationBullet": ["Example annotation"], 18 | "annotationXY": [ 19 | [90, "Private rented"] 20 | 21 | ], 22 | "annotationAlign": [ 23 | "middle" 24 | ], 25 | 26 | "circles": false, 27 | "annotationCXCY": [ 28 | ["60", "Social rented"] 29 | 30 | ], 31 | 32 | "xAxisLabel": "%", 33 | "xAxisScale": "auto_zero_max", 34 | "xAxisBreak": true, 35 | "xAxisBreak_sm_md_lg": [65, 65, 65] 36 | }, 37 | "optional": { 38 | "margin": { 39 | "sm": { 40 | "top": 20, 41 | "right": 10, 42 | "bottom": 35, 43 | "left": 60 44 | }, 45 | "md": { 46 | "top": 20, 47 | "right": 5, 48 | "bottom": 35, 49 | "left": 60 50 | }, 51 | "lg": { 52 | "top": 20, 53 | "right": 5, 54 | "bottom": 35, 55 | "left": 60 56 | } 57 | }, 58 | "aspectRatio": { 59 | "sm": [16, 16], 60 | "md": [16, 7], 61 | "lg": [16, 10] 62 | }, 63 | "mobileBreakpoint": 414, 64 | "mediumBreakpoint":600, 65 | 66 | "x_num_ticks": { 67 | "sm": 6, 68 | "md": 8, 69 | "lg": 10 70 | } 71 | 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /all-templates/stacked-bar-horizontal/data.csv: -------------------------------------------------------------------------------- 1 | group,Under occupied,Just right,Over occupied 2 | Owner occupied property,82.7,15.1,2.3 3 | Private rented,49.5,41.9,8.6 4 | Social rented,39.4,51.9,8.7 -------------------------------------------------------------------------------- /all-templates/stacked-bar-horizontal/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/stacked-bar-horizontal/fallback.png -------------------------------------------------------------------------------- /all-templates/stacked-bar-vertical-with-negatives/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "data_url": "data.csv", 4 | 5 | "sort_data": false, 6 | 7 | "colour_palette": ["#206095", "#118C7B", "#003C57", "#A8BD3A", "#27A0CC"], 8 | 9 | "dateFormat":"%d/%m/%Y", 10 | 11 | "legendLabels" : ["Gas","Electricity","Water","Internet"], 12 | 13 | "sourceText":"I made these numbers up", 14 | 15 | "annotationChart": [ 16 | 17 | ], 18 | "annotationBullet": [ 19 | 20 | ], 21 | "annotationXY":[ 22 | 23 | ], 24 | "annotationAlign":[ 25 | 26 | ], 27 | 28 | "circles" : false, 29 | "annotationCXCY":[ 30 | 31 | ], 32 | 33 | "yAxisLabel":"%", 34 | "yAxisScale":"auto_min_max", 35 | "yAxisBreak": true, 36 | "yAxisBreak_sm_md_lg": [65,65,65] 37 | }, 38 | "optional" : { 39 | "margin_sm": [20, 10, 35, 30], 40 | "margin_md": [20, 10, 35, 30], 41 | "margin_lg": [20, 10, 35, 30], 42 | 43 | "aspectRatio_sm" : [16,13], 44 | "aspectRatio_md" : [16,12], 45 | "aspectRatio_lg" : [16,10], 46 | 47 | "mobileBreakpoint" : 610, 48 | 49 | "xAxisTextFormat_sm_md_lg" : ["%y", "%Y", "%b %y"], 50 | 51 | "x_num_ticks_sm_md_lg" : [4,2,2], 52 | "y_num_ticks_sm_md_lg" : [6,8,10], 53 | "centre_line" : false, 54 | "centre_line_value" : 0 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /all-templates/stacked-bar-vertical-with-negatives/data.csv: -------------------------------------------------------------------------------- 1 | date,gas,electricity,water,internet 2 | 01/01/2020,7,1,-4,-5 3 | 01/01/2021,4,5,-8,-8 4 | 01/01/2022,12,3,-12,-19 5 | -------------------------------------------------------------------------------- /all-templates/stacked-bar-vertical-with-negatives/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/stacked-bar-vertical-with-negatives/fallback.png -------------------------------------------------------------------------------- /all-templates/stacked-bar-vertical/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | "graphic_data_url": "data.csv", 4 | 5 | "sort_data": false, 6 | 7 | "colour_palette": ["#206095", "#118C7B", "#003C57", "#A8BD3A", "#27A0CC"], 8 | 9 | "dateFormat":"", 10 | 11 | "legendLabels" : ["1985/86","1986/87","1987/88","1988/89","1989/90"], 12 | 13 | "sourceText":["Bus, rail, light rail and tram statistics tables, DfT"], 14 | "sourceURL":["http://www.ons.gov.uk/ons/publications/re-reference-tables.html?edition=tcm%3A77-350752"], 15 | 16 | "annotationChart": [ 17 | "Lorem ipsum dolor sit amet", 18 | "adipiscing elit sed do eiusmod" 19 | ], 20 | "annotationBullet": [ 21 | "Lorem ipsum dolor sit amet", 22 | "adipiscing elit sed do eiusmod" 23 | ], 24 | "annotationXY":[ 25 | ["Light rail and tram ","68.4"], 26 | ["Underground","20"] 27 | ], 28 | "annotationAlign":[ 29 | "middle", 30 | "middle" 31 | ], 32 | 33 | "circles" : false, 34 | "annotationCXCY":[ 35 | ["Rail","68.4"], 36 | ["Underground","73"] 37 | ], 38 | 39 | "yAxisLabel":"%", 40 | "yAxisScale":"auto_zero_max", 41 | "yAxisBreak": true, 42 | "yAxisBreak_sm_md_lg": [65,65,65] 43 | }, 44 | "optional" : { 45 | "margin_sm": [20, 10, 35, 30], 46 | "margin_md": [20, 10, 35, 30], 47 | "margin_lg": [20, 10, 35, 30], 48 | 49 | "aspectRatio_sm" : [16,13], 50 | "aspectRatio_md" : [16,12], 51 | "aspectRatio_lg" : [16,10], 52 | 53 | "mobileBreakpoint" : 610, 54 | 55 | "xAxisTextFormat_sm_md_lg" : ["%y", "%Y", "%b %y"], 56 | 57 | "x_num_ticks_sm_md_lg" : [4,2,2], 58 | "y_num_ticks_sm_md_lg" : [6,8,10], 59 | "centre_line" : false, 60 | "centre_line_value" : 0 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /all-templates/stacked-bar-vertical/data.csv: -------------------------------------------------------------------------------- 1 | group,1985/86,1986/87,1987/88,1988/89,1989/90 2 | Rail,30.4,6.036,0.321,31.22,31.22 3 | Underground,30.8,6.238,0.315,28.7,28.7 4 | Light rail and tram ,32.4,6.339,0.301,28.39,28.39 5 | Local bus,34.3,6.339,0.356,28.2,28.2 6 | Tractor,33.3,6.039,0.374,27.72,27.72 -------------------------------------------------------------------------------- /all-templates/stacked-bar-vertical/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/stacked-bar-vertical/fallback.png -------------------------------------------------------------------------------- /all-templates/stacked-lines/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/stacked-lines/Thumbs.db -------------------------------------------------------------------------------- /all-templates/stacked-lines/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential" : { 3 | 4 | "dataSets_url": [ "data"], 5 | 6 | "num_lines_url": [ "var0.csv", "var1.csv", "var2.csv"], 7 | 8 | "chart_type": "line", 9 | 10 | "dateFormat": "%Y", 11 | 12 | "legendLabels" : ["Co2 (Mt)", "Coal Consumption (Mt)","Real GDP per Capita (2013 Pounds)"], 13 | 14 | "sourceText":["Office for National Statistics"], 15 | "sourceURL":[], 16 | 17 | "addline": false, 18 | "lineText": "Add line text here", 19 | 20 | "draggable": false, 21 | "annotationsChart" : [], 22 | 23 | "wordwrap":[20,15], 24 | "annoAlign": [], 25 | 26 | "annotationBullet": [], 27 | "annotationXY":[ ], 28 | "annotationAlign":["end" ], 29 | 30 | "circles" : false, 31 | "annotationCXCY":[], 32 | 33 | "xAxisLabel":[""], 34 | "yDomain":[[0,800],[0,30000]], 35 | "yAxisLabel": "", 36 | "yAxisBreak": true, 37 | "yAxisBreak_sm_md_lg": [85,85,85], 38 | 39 | "numColumns_sm_md_lg":[1,1,1] 40 | 41 | }, 42 | "optional" : { 43 | 44 | "vertical_line" : true, 45 | "svgtarget": [1,2,1,2,1], 46 | "annotateLineX1_Y1_X2_Y2" : [ 47 | [["2008", "0"],["2008", "30000"]], 48 | [["2008", "0"],["2008", "30000"]], 49 | [["1956", "0"],["1956", "30000"]], 50 | [["1956", "0"],["1956", "30000"]], 51 | [["1850", "22277.9"],["2016", "22277.9"]] 52 | ], 53 | 54 | "svgtarget2":[1,1,1], 55 | "annotationChart": ["Clean air act (1956)","Climate change act","1990 Co2 levels"], 56 | "annotationAlign": ["end","end","start"], 57 | "annotationXY":[ 58 | ["1956",31000], 59 | ["2008",31000], 60 | ["1870",24000] 61 | ], 62 | 63 | "margin_sm": [15, 5, 20, 0], 64 | "margin_md": [15, 5, 15, 0], 65 | "margin_lg": [15, 10, 15, 0], 66 | 67 | "innersm":[50 , 15 , 40 , 50 ], 68 | "innermd":[35 , 15 , 50 , 50 ], 69 | "innerlg":[35 , 15 , 50 , 50 ], 70 | 71 | "aspectRatio_sm" : [10,7], 72 | "aspectRatio_md" : [3,1], 73 | "aspectRatio_lg" : [3,1], 74 | 75 | "mobileBreakpoint" : 414, 76 | "xAxisTextFormat_sm_md_lg" : ["%y", "%y", "%Y"], 77 | "x_num_ticks_sm_md_lg" : [5,5,6], 78 | "y_num_ticks_sm_md_lg" : [2,2,2], 79 | "centre_line" : false, 80 | "centre_line_value" :0 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /all-templates/stacked-lines/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/stacked-lines/fallback.png -------------------------------------------------------------------------------- /all-templates/stacked-lines/var0.csv: -------------------------------------------------------------------------------- 1 | date,Co2 and Coal consumption (Million Tonnes),Real GDP per Capita (2013 Pounds) 2 | 1850,129, 3 | 1851,123, 4 | 1852,122, 5 | 1853,122, 6 | 1854,147, 7 | 1855,138, 8 | 1856,148, 9 | 1857,145, 10 | 1858,143, 11 | 1859,158, 12 | 1860,177, 13 | 1861,185, 14 | 1862,179, 15 | 1863,190, 16 | 1864,205, 17 | 1865,217, 18 | 1866,223, 19 | 1867,229, 20 | 1868,225, 21 | 1869,236, 22 | 1870,241, 23 | 1871,255, 24 | 1872,269, 25 | 1873,279, 26 | 1874,271, 27 | 1875,286, 28 | 1876,286, 29 | 1877,291, 30 | 1878,286, 31 | 1879,288, 32 | 1880,313, 33 | 1881,330, 34 | 1882,332, 35 | 1883,346, 36 | 1884,337, 37 | 1885,333, 38 | 1886,330, 39 | 1887,338, 40 | 1888,352, 41 | 1889,364, 42 | 1890,372, 43 | 1891,380, 44 | 1892,372, 45 | 1893,334, 46 | 1894,382, 47 | 1895,386, 48 | 1896,397, 49 | 1897,407, 50 | 1898,408, 51 | 1899,437, 52 | 1900,443, 53 | 1901,433, 54 | 1902,450, 55 | 1903,454, 56 | 1904,456, 57 | 1905,462, 58 | 1906,478, 59 | 1907,500, 60 | 1908,487, 61 | 1909,492, 62 | 1910,496, 63 | 1911,508, 64 | 1912,481, 65 | 1913,526, 66 | 1914,510, 67 | 1915,516, 68 | 1916,535, 69 | 1917,529, 70 | 1918,493, 71 | 1919,481, 72 | 1920,496, 73 | 1921,337, 74 | 1922,452, 75 | 1923,480, 76 | 1924,502, 77 | 1925,474, 78 | 1926,260, 79 | 1927,492, 80 | 1928,462, 81 | 1929,486, 82 | 1930,465, 83 | 1931,435, 84 | 1932,418, 85 | 1933,414, 86 | 1934,447, 87 | 1935,453, 88 | 1936,479, 89 | 1937,494, 90 | 1938,474, 91 | 1939,477, 92 | 1940,501, 93 | 1941,496, 94 | 1942,495, 95 | 1943,480, 96 | 1944,466, 97 | 1945,441, 98 | 1946,460, 99 | 1947,487, 100 | 1948,502, 101 | 1949,512, 102 | 1950,528, 103 | 1951,575, 104 | 1952,558, 105 | 1953,570, 106 | 1954,583, 107 | 1955,608, 108 | 1956,606, 109 | 1957,602, 110 | 1958,587, 111 | 1959,577, 112 | 1960,616, 113 | 1961,621, 114 | 1962,625, 115 | 1963,637, 116 | 1964,641, 117 | 1965,656, 118 | 1966,652, 119 | 1967,625, 120 | 1968,640, 121 | 1969,661, 122 | 1970,685, 123 | 1971,667, 124 | 1972,649, 125 | 1973,682, 126 | 1974,642, 127 | 1975,620, 128 | 1976,626, 129 | 1977,636, 130 | 1978,633, 131 | 1979,667, 132 | 1980,610, 133 | 1981,600, 134 | 1982,579, 135 | 1983,578, 136 | 1984,561, 137 | 1985,586, 138 | 1986,601, 139 | 1987,606, 140 | 1988,606, 141 | 1989,594, 142 | 1990,596.3, 143 | 1991,603.6, 144 | 1992,587.3, 145 | 1993,572.8, 146 | 1994,568.8, 147 | 1995,560.1, 148 | 1996,580.9, 149 | 1997,554.1, 150 | 1998,558.4, 151 | 1999,552, 152 | 2000,558.3, 153 | 2001,566.7, 154 | 2002,549.8, 155 | 2003,561, 156 | 2004,561.8, 157 | 2005,557.9, 158 | 2006,554.8, 159 | 2007,545.9, 160 | 2008,531.1, 161 | 2009,480.8, 162 | 2010,498.3, 163 | 2011,455.6, 164 | 2012,474.2, 165 | 2013,464, 166 | 2014,424.9, 167 | 2015,408.3, 168 | 2016,385.8, 169 | -------------------------------------------------------------------------------- /all-templates/stacked-lines/var1.csv: -------------------------------------------------------------------------------- 1 | date,Co2 and Coal consumption (Million Tonnes),Real GDP per Capita (2013 Pounds) 2 | 1850,29.0477, 3 | 1851,32.9848, 4 | 1852,36.8733, 5 | 1853,40.7132, 6 | 1854,44.5045, 7 | 1855,48.2472, 8 | 1856,51.9413, 9 | 1857,55.5868, 10 | 1858,65, 11 | 1859,68, 12 | 1860,72, 13 | 1861,75, 14 | 1862,78, 15 | 1863,81, 16 | 1864,84, 17 | 1865,87, 18 | 1866,90, 19 | 1867,93, 20 | 1868,96, 21 | 1869,98, 22 | 1870,101, 23 | 1871,103, 24 | 1872,105, 25 | 1873,108, 26 | 1874,110, 27 | 1875,113, 28 | 1876,115, 29 | 1877,117, 30 | 1878,120, 31 | 1879,122, 32 | 1880,124, 33 | 1881,126, 34 | 1882,128, 35 | 1883,130, 36 | 1884,132, 37 | 1885,134, 38 | 1886,135, 39 | 1887,137, 40 | 1888,139, 41 | 1889,141, 42 | 1890,143, 43 | 1891,145, 44 | 1892,147, 45 | 1893,149, 46 | 1894,150, 47 | 1895,152, 48 | 1896,154, 49 | 1897,156, 50 | 1898,158, 51 | 1899,160, 52 | 1900,163, 53 | 1901,165, 54 | 1902,167, 55 | 1903,170, 56 | 1904,172, 57 | 1905,174, 58 | 1906,176, 59 | 1907,179, 60 | 1908,181, 61 | 1909,184, 62 | 1910,187, 63 | 1911,190, 64 | 1912,193, 65 | 1913,196.088, 66 | 1914,191.1096, 67 | 1915,199.136, 68 | 1916,208.3816, 69 | 1917,206.5528, 70 | 1918,190.1952, 71 | 1919,185.42, 72 | 1920,193.7512, 73 | 1921,132.4864, 74 | 1922,169.8752, 75 | 1923,182.5752, 76 | 1924,188.468, 77 | 1925,179.2224, 78 | 1926,123.2408, 79 | 1927,186.3344, 80 | 1928,174.0408, 81 | 1929,184.404, 82 | 1930,174.6504, 83 | 1931,162.052, 84 | 1932,159.1056, 85 | 1933,159.004, 86 | 1934,170.4848, 87 | 1935,175.6664, 88 | 1936,185.1152, 89 | 1937,192.1256, 90 | 1938,180.848, 91 | 1939,189.5856, 92 | 1940,198.9328, 93 | 1941,199.7456, 94 | 1942,200.5584, 95 | 1943,193.4464, 96 | 1944,190.2968, 97 | 1945,182.2704, 98 | 1946,189.2808, 99 | 1947,187.452, 100 | 1948,197.0024, 101 | 1949,198.9328, 102 | 1950,205.8416, 103 | 1951,211.1248, 104 | 1952,210.1088, 105 | 1953,211.1248, 106 | 1954,217.2208, 107 | 1955,218.6432, 108 | 1956,220.98, 109 | 1957,216.3064, 110 | 1958,205.6384, 111 | 1959,192.4304, 112 | 1960,199.858, 113 | 1961,194.879, 114 | 1962,194.269, 115 | 1963,197.114, 116 | 1964,190.205, 117 | 1965,187.564, 118 | 1966,177.505, 119 | 1967,166.43, 120 | 1968,167.148, 121 | 1969,163.746, 122 | 1970,156.885, 123 | 1971,140.931, 124 | 1972,122.883, 125 | 1973,133.371, 126 | 1974,117.887, 127 | 1975,122.213, 128 | 1976,123.604, 129 | 1977,123.977, 130 | 1978,120.477, 131 | 1979,129.379, 132 | 1980,123.46, 133 | 1981,118.386, 134 | 1982,110.998, 135 | 1983,111.475, 136 | 1984,77.309, 137 | 1985,105.386, 138 | 1986,114.234, 139 | 1987,115.894, 140 | 1988,111.499, 141 | 1989,107.581, 142 | 1990,108.257, 143 | 1991,107.514, 144 | 1992,100.58, 145 | 1993,86.756, 146 | 1994,81.767, 147 | 1995,76.942, 148 | 1996,71.39995763, 149 | 1997,63.08, 150 | 1998,63.152, 151 | 1999,55.724, 152 | 2000,59.93099843, 153 | 2001,63.85040854, 154 | 2002,58.55386268, 155 | 2003,63.02253873, 156 | 2004,60.44964659, 157 | 2005,61.85237933, 158 | 2006,67.59412795, 159 | 2007,63.02890321, 160 | 2008,58.38504536, 161 | 2009,48.71819298, 162 | 2010,51.32416273, 163 | 2011,51.50726869, 164 | 2012,64.04233103, 165 | 2013,60.20598534, 166 | 2014,48.2947684, 167 | 2015,37.45091334, 168 | 2016,17.74475885, 169 | -------------------------------------------------------------------------------- /all-templates/stacked-lines/var2.csv: -------------------------------------------------------------------------------- 1 | date,Co2 and Coal consumption (Million Tonnes),Real GDP per Capita (2013 Pounds) 2 | 1850,,2707 3 | 1851,,2803 4 | 1852,,2863 5 | 1853,,2934 6 | 1854,,3014 7 | 1855,,2964 8 | 1856,,3077 9 | 1857,,3069 10 | 1858,,3031 11 | 1859,,3124 12 | 1860,,3164 13 | 1861,,3193 14 | 1862,,3126 15 | 1863,,3249 16 | 1864,,3254 17 | 1865,,3371 18 | 1866,,3376 19 | 1867,,3361 20 | 1868,,3453 21 | 1869,,3490 22 | 1870,,3721 23 | 1871,,3889 24 | 1872,,3859 25 | 1873,,3837 26 | 1874,,3948 27 | 1875,,3939 28 | 1876,,3908 29 | 1877,,3896 30 | 1878,,3844 31 | 1879,,3733 32 | 1880,,3950 33 | 1881,,4011 34 | 1882,,4038 35 | 1883,,4116 36 | 1884,,4028 37 | 1885,,3946 38 | 1886,,3918 39 | 1887,,4046 40 | 1888,,4145 41 | 1889,,4237 42 | 1890,,4236 43 | 1891,,4323 44 | 1892,,4165 45 | 1893,,4079 46 | 1894,,4231 47 | 1895,,4322 48 | 1896,,4447 49 | 1897,,4460 50 | 1898,,4623 51 | 1899,,4742 52 | 1900,,4689 53 | 1901,,4743 54 | 1902,,4769 55 | 1903,,4669 56 | 1904,,4683 57 | 1905,,4792 58 | 1906,,4863 59 | 1907,,4933 60 | 1908,,4689 61 | 1909,,4753 62 | 1910,,4842 63 | 1911,,4968 64 | 1912,,5032 65 | 1913,,5223 66 | 1914,,5278 67 | 1915,,5536 68 | 1916,,5578 69 | 1917,,5534 70 | 1918,,5647 71 | 1919,,5215 72 | 1920,,4880 73 | 1921,,4383 74 | 1922,,4571 75 | 1923,,4681 76 | 1924,,4869 77 | 1925,,5024 78 | 1926,,4847 79 | 1927,,5201 80 | 1928,,5225 81 | 1929,,5362 82 | 1930,,5301 83 | 1931,,5035 84 | 1932,,5010 85 | 1933,,5149 86 | 1934,,5439 87 | 1935,,5615 88 | 1936,,5857 89 | 1937,,6035 90 | 1938,,6056 91 | 1939,,6287 92 | 1940,,6844 93 | 1941,,7441 94 | 1942,,7546 95 | 1943,,7614 96 | 1944,,7246 97 | 1945,,6891 98 | 1946,,6717 99 | 1947,,6588 100 | 1948,,6733 101 | 1949,,6919 102 | 1950,,7114 103 | 1951,,7420 104 | 1952,,7517 105 | 1953,,7909 106 | 1954,,8221 107 | 1955,,8505 108 | 1956,,8603 109 | 1957,,8725 110 | 1958,,8798 111 | 1959,,9106 112 | 1960,,9600 113 | 1961,,9776 114 | 1962,,9794 115 | 1963,,10207 116 | 1964,,10700 117 | 1965,,10855 118 | 1966,,10966 119 | 1967,,11206 120 | 1968,,11762 121 | 1969,,11935 122 | 1970,,12222 123 | 1971,,12580 124 | 1972,,13080 125 | 1973,,13902 126 | 1974,,13555 127 | 1975,,13355 128 | 1976,,13748 129 | 1977,,14093 130 | 1978,,14687 131 | 1979,,15219 132 | 1980,,14885 133 | 1981,,14762 134 | 1982,,15077 135 | 1983,,15706 136 | 1984,,16037 137 | 1985,,16666 138 | 1986,,17152 139 | 1987,,18033 140 | 1988,,19039 141 | 1989,,19476 142 | 1990,,19560 143 | 1991,,19274 144 | 1992,,19294 145 | 1993,,19733 146 | 1994,,20448 147 | 1995,,20901 148 | 1996,,21383 149 | 1997,,21995 150 | 1998,,22634 151 | 1999,,23294 152 | 2000,,24083 153 | 2001,,24645 154 | 2002,,25128 155 | 2003,,25881 156 | 2004,,26397 157 | 2005,,26973 158 | 2006,,27460 159 | 2007,,27936 160 | 2008,,27534 161 | 2009,,26158 162 | 2010,,26447 163 | 2011,,26623 164 | 2012,,26794 165 | 2013,,27136 166 | 2014,,27756 167 | 2015,,28142 168 | 2016,,28448 169 | -------------------------------------------------------------------------------- /all-templates/tie-fighter/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "legendLabels": ["min / max", "really long label for wrapping"], 5 | "colour_palette": ["#053D58", "#3A7899"], 6 | "sourceText": ["Office for National Statistics"], 7 | 8 | "annotationChart": [ 9 | "Line annotation", 10 | "2nd annotation" 11 | ], 12 | "annotationBullet": [], 13 | "annotationXY": [ 14 | ["20", "London"], 15 | ["60", "North East"] 16 | ], 17 | "annotationAlign": [ 18 | "middle", 19 | "middle" 20 | ], 21 | "minmaxonly": true, 22 | "arrows": "start", 23 | "tooltip": true, 24 | "xAxisLabel": "Amount", 25 | "yAxisLabel": "Regions and Countries", 26 | "xAxisScale": "auto_min_max", 27 | "dotsize": 5 28 | }, 29 | "optional": { 30 | "margin": { 31 | "sm": { 32 | "top": 35, 33 | "right": 20, 34 | "bottom": 5, 35 | "left": 135 36 | }, 37 | "md": { 38 | "top": 15, 39 | "right": 20, 40 | "bottom": 5, 41 | "left": 135 42 | }, 43 | "lg": { 44 | "top": 15, 45 | "right": 20, 46 | "bottom": 5, 47 | "left": 135 48 | } 49 | }, 50 | 51 | "aspectRatio": { 52 | "sm": [4, 6], 53 | "md": [3, 3], 54 | "lg": [16, 10] 55 | }, 56 | 57 | "mobileBreakpoint": 510, 58 | "middleBreakpoint": 600, 59 | "x_num_ticks": { 60 | "sm": 6, 61 | "md": 8, 62 | "lg": 10 63 | }, 64 | 65 | "centre_line": false, 66 | "centre_line_value": 0 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /all-templates/tie-fighter/data.csv: -------------------------------------------------------------------------------- 1 | name,imin,imax,median 2 | North West,-58,160,100 3 | North East,87,110,101 4 | Wales,56,120,102 5 | South East,12,220,103 6 | London,231,-18,104 7 | South West,170,50,105 8 | East Midlands,120,48,106 9 | Yorkshire,2,200,107 10 | Scotland,54,190,108 11 | East,5,202,109 12 | West Midlands,8,210,110 13 | Northern Ireland,55,199,111 -------------------------------------------------------------------------------- /all-templates/tie-fighter/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/tie-fighter/fallback.png -------------------------------------------------------------------------------- /all-templates/tiefighter-with-buttons/chart.css: -------------------------------------------------------------------------------- 1 | .x.axis path { 2 | display: none; 3 | } 4 | 5 | /* Full width */ 6 | 7 | .btn-form-fullwidth { 8 | display: inline-flex; 9 | font-family: 'Open Sans', Arial, sans-serif; 10 | -webkit-font-smoothing: antialiased; 11 | font-weight: 600; 12 | font-size: 16px; 13 | margin-bottom: 32px; 14 | width: 100%; 15 | } 16 | 17 | .form-group-fullwidth { 18 | display: flex; 19 | cursor: pointer; 20 | height: 50px; 21 | box-sizing: border-box; 22 | text-align: center; 23 | width: 100%; 24 | margin-top: 3px; 25 | margin-right: 4px; 26 | } 27 | 28 | .form-group-fullwidth:last-child { 29 | /* border-right: solid 3px #206095;*/ 30 | } 31 | 32 | .form-group-fullwidth:focus { 33 | outline: orange 3px solid; 34 | } 35 | 36 | .label-primary-fullwidth { 37 | padding: 12px 16px; 38 | cursor: pointer; 39 | color: #206095; 40 | background: #fff; 41 | border-top: solid 3px #206095; 42 | border-left: solid 3px #206095; 43 | border-bottom: solid 3px #206095; 44 | border-right: solid 3px #206095; 45 | width: 100%; 46 | } 47 | 48 | .label-primary-fullwidth:hover, 49 | .label-primary-fullwidth:focus { 50 | background: #206095; 51 | color: #fff; 52 | border-color: #206095; 53 | width: 100%; 54 | } 55 | 56 | .label-primary-fullwidth:focus { 57 | outline: orange 3px solid; 58 | } 59 | 60 | .radio-primary-fullwidth:checked+.label-primary-fullwidth { 61 | background: #206095; 62 | color: #fff; 63 | border-color: #206095; 64 | cursor: default; 65 | width: 100%; 66 | } 67 | 68 | .radio-primary-fullwidth { 69 | display: none; 70 | } 71 | 72 | h5 { 73 | font-size: 16px; 74 | margin: 16px 0 8px 0; 75 | font-weight: 700; 76 | color: #323132; 77 | } 78 | 79 | .visuallyhidden { 80 | position: absolute; 81 | width: 1px; 82 | height: 1px; 83 | margin: -1px; 84 | padding: 0; 85 | overflow: hidden; 86 | clip: rect(0, 0, 0, 0); 87 | border: 0; 88 | } 89 | 90 | /* stuff for legend */ 91 | #legend{ 92 | display:flex; 93 | margin-bottom: 20px; 94 | } 95 | 96 | .legenditem { 97 | display:flex; 98 | font-size: 14px; 99 | padding-right:25px; 100 | } 101 | 102 | .square { 103 | height: 15px; 104 | width: 15px; 105 | border-radius: 50%; 106 | } 107 | 108 | .legendtext{ 109 | font-size:16px; 110 | color:#707070; 111 | } 112 | 113 | p{ 114 | line-height:1em; 115 | margin-bottom:10px; 116 | } 117 | 118 | @media (max-width: 400px) { 119 | .legend{ 120 | flex-flow:column; 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /all-templates/tiefighter-with-buttons/config.js: -------------------------------------------------------------------------------- 1 | dvc={ 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "legendLabels": ["2015-2019", "2020"], 5 | "colour_palette": ["#6D6E72", "#0075A3"], 6 | "label_average": "United Kingdom", 7 | "line_colour": "gray", 8 | "sourceText": "Office for National Statistics", 9 | "accessibleSummary":"Chart showing death rates due to alchohol by regions, for males, females and all." 10 | }, 11 | "optional": { 12 | "margin": { 13 | "sm": { 14 | "top": 15, 15 | "right": 20, 16 | "bottom": 20, 17 | "left": 100 18 | }, 19 | "md": { 20 | "top": 15, 21 | "right": 20, 22 | "bottom": 20, 23 | "left": 150 24 | }, 25 | "lg": { 26 | "top": 15, 27 | "right": 20, 28 | "bottom": 20, 29 | "left": 150 30 | } 31 | }, 32 | "seriesHeight":{ 33 | "sm":50, 34 | "md":60, 35 | "lg":60 36 | }, 37 | "aspectRatio": { 38 | "sm": [5, 6], 39 | "md": [15, 6], 40 | "lg": [15, 9] 41 | }, 42 | "mobileBreakpoint": 510, 43 | "mediumBreakpoint": 600 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /all-templates/tiefighter-with-buttons/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "essential": { 3 | "graphic_data_url": "data.csv", 4 | "legendLabels": ["2015-2019", "2020"], 5 | "colour_palette": ["#6D6E72", "#0075A3"], 6 | "label_average": "United Kingdom", 7 | "line_colour": "gray", 8 | "sourceText": "Office for National Statistics", 9 | "accessibleSummary":"Chart showing death rates due to alchohol by regions, for males, females and all." 10 | }, 11 | "optional": { 12 | "margin": { 13 | "sm": { 14 | "top": 15, 15 | "right": 20, 16 | "bottom": 20, 17 | "left": 100 18 | }, 19 | "md": { 20 | "top": 15, 21 | "right": 20, 22 | "bottom": 20, 23 | "left": 150 24 | }, 25 | "lg": { 26 | "top": 15, 27 | "right": 20, 28 | "bottom": 20, 29 | "left": 150 30 | } 31 | }, 32 | "seriesHeight":{ 33 | "sm":50, 34 | "md":60, 35 | "lg":60 36 | }, 37 | "aspectRatio": { 38 | "sm": [5, 6], 39 | "md": [15, 6], 40 | "lg": [15, 9] 41 | }, 42 | "mobileBreakpoint": 510, 43 | "mediumBreakpoint": 600 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /all-templates/tiefighter-with-buttons/data.csv: -------------------------------------------------------------------------------- 1 | name,Category,min,max 2 | Home,England,1.036438598,82.81832389 3 | Hospital,England,67.79034467,97.15070027 4 | Care home,England,51.44576587,20.33129332 5 | Other,England,30.69747402,83.59107712 6 | Home,Wales,80.33512194,75.11363638 7 | Hospital,Wales,67.01922196,80.77230259 8 | Care home,Wales,35.54949123,24.25480598 9 | Other,Wales,55.26525179,29.18697595 10 | -------------------------------------------------------------------------------- /all-templates/tiefighter-with-buttons/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/all-templates/tiefighter-with-buttons/fallback.png -------------------------------------------------------------------------------- /all-templates/tiefighter-with-buttons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dot plot chart with buttons 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 |
27 |
28 |
29 |
30 | 31 | 32 | 33 | 36 | 37 | 38 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /how-to-template/lib/chosen-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/how-to-template/lib/chosen-sprite.png -------------------------------------------------------------------------------- /how-to-template/lib/chosen-sprite@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/how-to-template/lib/chosen-sprite@2x.png -------------------------------------------------------------------------------- /how-to-template/lib/d3-selection-multi.v1.min.js: -------------------------------------------------------------------------------- 1 | // https://github.com/d3/d3-selection-multi Version 1.0.1. Copyright 2017 Mike Bostock. 2 | !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("d3-selection"),require("d3-transition")):"function"==typeof define&&define.amd?define(["d3-selection","d3-transition"],n):n(t.d3,t.d3)}(this,function(t,n){"use strict";function r(n,r){return n.each(function(){var n=r.apply(this,arguments),e=t.select(this);for(var i in n)e.attr(i,n[i])})}function e(t,n){for(var r in n)t.attr(r,n[r]);return t}function i(n,r,e){return n.each(function(){var n=r.apply(this,arguments),i=t.select(this);for(var o in n)i.style(o,n[o],e)})}function o(t,n,r){for(var e in n)t.style(e,n[e],r);return t}function f(n,r){return n.each(function(){var n=r.apply(this,arguments),e=t.select(this);for(var i in n)e.property(i,n[i])})}function u(t,n){for(var r in n)t.property(r,n[r]);return t}function s(n,r){return n.each(function(){var e=r.apply(this,arguments),i=t.select(this).transition(n);for(var o in e)i.attr(o,e[o])})}function c(t,n){for(var r in n)t.attr(r,n[r]);return t}function a(n,r,e){return n.each(function(){var i=r.apply(this,arguments),o=t.select(this).transition(n);for(var f in i)o.style(f,i[f],e)})}function p(t,n,r){for(var e in n)t.style(e,n[e],r);return t}var l=function(t){return("function"==typeof t?r:e)(this,t)},y=function(t,n){return("function"==typeof t?i:o)(this,t,null==n?"":n)},h=function(t){return("function"==typeof t?f:u)(this,t)},v=function(t){return("function"==typeof t?s:c)(this,t)},d=function(t,n){return("function"==typeof t?a:p)(this,t,null==n?"":n)};t.selection.prototype.attrs=l,t.selection.prototype.styles=y,t.selection.prototype.properties=h,n.transition.prototype.attrs=v,n.transition.prototype.styles=d}); -------------------------------------------------------------------------------- /how-to-template/lib/modernizr.svg.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.7.1 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-svg 3 | */ 4 | ;window.Modernizr=function(a,b,c){function u(a){i.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.7.1",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l={svg:"http://www.w3.org/2000/svg"},m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.svg=function(){return!!b.createElementNS&&!!b.createElementNS(l.svg,"svg").createSVGRect};for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},u(""),h=j=null,e._version=d,e}(this,this.document); -------------------------------------------------------------------------------- /how-to-template/lib/queue.js: -------------------------------------------------------------------------------- 1 | !function(){function n(n){function e(){for(;i=ap;){var u=a++,e=c[u],o=t.call(e,1);o.push(l(u)),++p,e[0].apply(null,o)}}function l(n){return function(u,t){--p,null==s&&(null!=u?(s=u,a=d=0/0,o()):(c[n]=t,--d?i||e():o()))}}function o(){null!=s?m(s):f?m(s,c):m.apply(null,[s].concat(c))}var r,i,f,c=[],a=0,p=0,d=0,s=null,m=u;return n||(n=1/0),r={defer:function(){return s||(c.push(arguments),++d,e()),r},await:function(n){return m=n,f=!1,d||o(),r},awaitAll:function(n){return m=n,f=!0,d||o(),r}}}function u(){}var t=[].slice;n.version="1.0.7","function"==typeof define&&define.amd?define(function(){return n}):"object"==typeof module&&module.exports?module.exports=n:this.queue=n}(); -------------------------------------------------------------------------------- /how-to-template/lib/tabstyles.css: -------------------------------------------------------------------------------- 1 | /* Individual tab styles */ 2 | 3 | 4 | /*****************************/ 5 | /* Falling Icon, from http://vintageproductions.eu/grid/interactivity/ */ 6 | /*****************************/ 7 | 8 | .tabs-style-iconfall { 9 | overflow: visible; 10 | } 11 | 12 | .tabs-style-iconfall nav a { 13 | display: inline-block; 14 | overflow: visible; 15 | color: #74777b; 16 | /* padding-left: 29%; 17 | padding-right: 29%;*/ 18 | /* line-height: 1;*/ 19 | height: 46px; 20 | /* -webkit-transition: color 0.3s cubic-bezier(0.7,0,0.3,1); 21 | transition: color 0.3s cubic-bezier(0.7,0,0.3,1);*/ 22 | } 23 | 24 | /*.tabs-style-iconfall nav a:hover, 25 | .tabs-style-iconfall nav a:focus, 26 | .tabs-style-iconfall nav li.tab-current a { 27 | color: #1586CE; 28 | }*/ 29 | 30 | .tabs-style-iconfall nav a span { 31 | font-weight: 700; 32 | } 33 | 34 | /*.tabs-style-iconfall nav li::before { 35 | position: absolute; 36 | bottom: 1em; 37 | left: 50%; 38 | margin-left: -20px; 39 | width: 40px; 40 | height: 4px; 41 | background-color: #000; 42 | -webkit-transition: -webkit-transform 0.2s ease-in; 43 | transition: transform 0.2s ease-in; 44 | -webkit-transform: scale3d(0,1,1); 45 | transform: scale3d(0,1,1); 46 | }*/ 47 | 48 | .tabs-style-iconfall nav li.tab-current::before { 49 | opacity: 1; 50 | /* -webkit-transform: scale3d(1,1,1); 51 | transform: scale3d(1,1,1);*/ 52 | } 53 | 54 | .tabs-style-iconfall .icon::before { 55 | display: block; 56 | /* margin: 0 0 0.35em;*/ 57 | /* opacity: 0;*/ 58 | /* -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; 59 | transition: transform 0.2s, opacity 0.2s;*/ 60 | -webkit-transform: translate3d(0,-100px,0); 61 | transform: translate3d(0,-100px,0); 62 | pointer-events: none; 63 | } 64 | 65 | .tabs-style-iconfall nav li.tab-current .icon::before { 66 | opacity: 1; 67 | -webkit-transform: translate3d(0,0,0); 68 | transform: translate3d(0,0,0); 69 | } 70 | 71 | @media screen and (max-width: 58em) { 72 | .tabs-style-iconfall nav li .icon::before { 73 | opacity: 1; 74 | -webkit-transform: translate3d(0,0,0); 75 | transform: translate3d(0,0,0); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /how-to-template/template/config.js: -------------------------------------------------------------------------------- 1 | var dvc = { 2 | // essential is for things that need changing 3 | essential: { 4 | title: "This is the title", 5 | source: "This is the source" 6 | }, 7 | // optional is for the rest 8 | optional: { 9 | graphic_data_url: "data.csv", 10 | breakpoint_sm: 450, // mobile 11 | breakpoint_md: 600, // tablet 12 | margin: { 13 | top: 10, 14 | right: 10, 15 | bottom: 10, 16 | left: 10 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /how-to-template/template/data.csv: -------------------------------------------------------------------------------- 1 | xaxis,category1,category2 2 | 2018,3,15 3 | 2019,8,5 -------------------------------------------------------------------------------- /how-to-template/template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ONS chart template 5 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
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.
27 | 28 |
29 |

This is a template

30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /how-to-template/template/script.js: -------------------------------------------------------------------------------- 1 | var graphic = d3.select('#graphic'); 2 | var pymChild = null; 3 | 4 | console.log('Running script.js!'); 5 | console.log('Heres the config '+JSON.stringify(dvc)); 6 | 7 | function drawGraphic() { 8 | console.log('Running drawGraphic'); 9 | graphic.selectAll('*').remove(); 10 | } 11 | 12 | //check whether browser can cope with svg 13 | if (Modernizr.svg) { 14 | //load chart data 15 | console.log('get csv'); 16 | d3.csv(dvc.optional.graphic_data_url, function(error, data) { 17 | 18 | graphic_data = data; 19 | console.log(graphic_data); 20 | // graphic_data.forEach(function(d) { 21 | // d.date = d3.timeParse(dvc.essential.dateFormat)(d.date); 22 | // }); 23 | 24 | //use pym to create iframed chart dependent on specified variables 25 | pymChild = new pym.Child({ renderCallback: drawGraphic}); 26 | }); 27 | 28 | 29 | } else { 30 | //use pym to create iframe containing fallback image (which is set as default) 31 | pymChild = new pym.Child(); 32 | if (pymChild) { 33 | pymChild.sendHeight(); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /how-to-template/template/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | color:#206095; 3 | } 4 | -------------------------------------------------------------------------------- /img/003C57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/003C57.png -------------------------------------------------------------------------------- /img/118C7B.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/118C7B.png -------------------------------------------------------------------------------- /img/1AA590.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/1AA590.png -------------------------------------------------------------------------------- /img/206095.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/206095.png -------------------------------------------------------------------------------- /img/22D0B6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/22D0B6.png -------------------------------------------------------------------------------- /img/27A0CC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/27A0CC.png -------------------------------------------------------------------------------- /img/746CB1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/746CB1.png -------------------------------------------------------------------------------- /img/871A5B.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/871A5B.png -------------------------------------------------------------------------------- /img/8A9B2E.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/8A9B2E.png -------------------------------------------------------------------------------- /img/A8BD3A.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/A8BD3A.png -------------------------------------------------------------------------------- /img/F39431.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/F39431.png -------------------------------------------------------------------------------- /img/F56927.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/F56927.png -------------------------------------------------------------------------------- /img/F66068.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ONSvisual/Simple-charts/b3b7a4267d2910144a28350fe1282d2fdbfda09d/img/F66068.png -------------------------------------------------------------------------------- /showcase/README.md: -------------------------------------------------------------------------------- 1 | A directory to generate a combinatory view list. This can be viewed at http://onsvisual.github.io/Simple-charts/showcase/ 2 | 3 | ## Structure 4 | - makepage.py - the main file generation script 5 | - index.html - generated html page 6 | - allplots.json - parsed json data from the readme incase that is useful. 7 | 8 | ## Contributing 9 | When adding new plots, and updating the main README, the python script here needs to be also rerun to update the showcase page. 10 | 11 | This was made to be dependancy free, so a core conda installation should already contain all the tools necessary to run it. 12 | 13 | 14 | -------------------------------------------------------------------------------- /showcase/makepage.py: -------------------------------------------------------------------------------- 1 | import re, jinja2,json 2 | 3 | 4 | rme = open('../README.md').readlines() 5 | items = re.findall('\|(.+?)\s*\|\s*\[View\]\((.+?)\)\s*\|\s*\[``\]\((.+?)\)', ''.join(rme)) 6 | 7 | 8 | sort = {} 9 | for id,i in enumerate(items): 10 | categories = i[0].strip().split(' - ') 11 | if categories[0] not in sort: 12 | sort[categories[0]] = [dict(name = categories[-1], url = i[1], code = i[2],id=id)] 13 | else : 14 | sort[categories[0]].append(dict(name = categories[-1], url = i[1], code = i[2], id=id)) 15 | 16 | 17 | # optional nested list of all the plots 18 | with open('allplots.json','w') as f: 19 | f.write(json.dumps(sort, indent = 3)) 20 | 21 | 22 | 23 | template = ''' 24 | 25 | 26 | 27 | 28 | 29 | 36 | 37 | {% for item in sort %} 38 |

{{item}}

39 | {% for subitem in sort[item] %} 40 | 41 | 42 | 43 | 44 |

{{subitem.name.title()}}

45 | 46 | 47 | 48 | 49 | {% endfor %} 50 | {% endfor %} 51 | 52 |
53 | 54 | 55 | 69 | 70 | 71 | 72 | ''' 73 | 74 | 75 | jinja2.Template(template).stream(sort = sort).dump('index.html') 76 | 77 | 78 | import os 79 | os.system('open index.html') --------------------------------------------------------------------------------