Merge pull request #238 from ONSvisual/235-small-multiple-clustered-b…

…ar-chart-initial-commit

Initial commit - Small multiple clustered bar chart

README.md

@@ -27,6 +27,7 @@ The official repository of all publication ready ONS charts. See the [chart menu
 | Bar chart horizontal with reference small multiple          | [View](https://onsvisual.github.io/Charts/bar-chart-horizontal-with-reference-sm/)                      | ❌           | ❌          | ✅               |
 | Bar chart horizontal small multiple with colour             | [View](https://onsvisual.github.io/Charts/bar-chart-horizontal-sm-colour/)                              | ❌           | ❌          | ✅               |
 | Bar chart horizontal clustered                              | [View](https://onsvisual.github.io/Charts/bar-chart-horizontal-clustered/)                              | ❌           | ❌          | ✅               |
+| Bar chart horizontal clustered sm                           | [View](https://onsvisual.github.io/Charts/bar-chart-horizontal-clustered-sm/)                           | ❌           | ❌          | ✅               |
 | Bar chart horizontal stacked                                | [View](https://onsvisual.github.io/Charts/bar-chart-horizontal-stacked/)                                | ❌           | ❌          | ✅               |
 | Bar chart horizontal stacked with tooltip                   | [View](https://onsvisual.github.io/Charts/bar-chart-horizontal-stacked-with-tooltip/)                   | ❌           | ❌          | ✅               |
 | Bar chart horizontal stacked sm                             | [View](https://onsvisual.github.io/Charts/bar-chart-horizontal-stacked-sm/)                             | ❌           | ❌          | ✅               |

bar-chart-horizontal-clustered-sm/chart.css

@@ -0,0 +1,18 @@
+.dataLabels{
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.chart-container {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.chart-container:last-child {
+  margin-right: 0;
+}
+
+.title {
+  font-weight: 600;
+  fill: #414042;
+}

bar-chart-horizontal-clustered-sm/config.js

@@ -0,0 +1,62 @@
+config = {
+	"essential": {
+		"graphic_data_url": "data.csv",
+		"colour_palette": ["#206095", "#27A0CC", "#871A5B", "#A8BD3A", "#F66068", "#003C57"],
+		"sourceText": "Office for National Statistics",
+		"accessibleSummary": "The chart canvas is hidden from screen readers. The main message is summarised by the chart title and the data behind the chart is available to download below.",
+		"dataLabels": {
+			"show": true,
+			"numberFormat": ".0%"
+		},
+		"xDomain": "auto",
+		// either "auto" or an array for the x domain e.g. [0,100]
+		"xAxisLabel": "x axis label"
+	},
+	"optional": {
+		"chart_every": {
+			"sm": 1,
+			"md": 1,
+			"lg": 2
+		},
+		"aspectRatio": {
+			"sm": [1, 2],
+			"md": [1, 2],
+			"lg": [1, 2]
+		},
+		"margin": {
+			"sm": {
+				"top": 30,
+				"right": 20,
+				"bottom": 50,
+				"left": 200
+			},
+			"md": {
+				"top": 30,
+				"right": 20,
+				"bottom": 50,
+				"left": 200
+			},
+			"lg": {
+				"top": 30,
+				"right": 20,
+				"bottom": 50,
+				"left": 200
+			}
+		},
+		"seriesHeight": {
+			"sm": 60,
+			"md": 60,
+			"lg": 60
+		},
+		"xAxisTicks": {
+			"sm": 2,
+			"md": 2,
+			"lg": 4
+		},
+		"mobileBreakpoint": 510,
+		"mediumBreakpoint": 600,
+		"dropYAxis": true
+	},
+	"elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
+	"chart_build": {}
+};

bar-chart-horizontal-clustered-sm/data.csv

@@ -0,0 +1,43 @@
+name,series,category,value
+Other services,series1,value,0.987848719
+Other services,series1,ref,0.713166822
+Manufacturing,series1,value,0.983661406
+Manufacturing,series1,ref,0.482401697
+Construction,series1,value,0.681288045
+Construction,series1,ref,0.495087081
+Arts,series1,value,0.481757214
+Arts,series1,ref,0.310957379
+Administrative,series1,value,0.209665614
+Administrative,series1,ref,0.223459104
+Wholesale trade,series1,value,0.176396639
+Wholesale trade,series1,ref,0.787709541
+Administrative and supportive service activities,series1,value,0.047910167
+Administrative and supportive service activities,series1,ref,0.873262589
+Other services,series2,value,0.987848719
+Other services,series2,ref,0.102020442
+Manufacturing,series2,value,0.983661406
+Manufacturing,series2,ref,0.497197175
+Construction,series2,value,0.681288045
+Construction,series2,ref,0.450160625
+Arts,series2,value,0.481757214
+Arts,series2,ref,0.546506975
+Administrative,series2,value,0.209665614
+Administrative,series2,ref,0.604779339
+Wholesale trade,series2,value,0.176396639
+Wholesale trade,series2,ref,0.511551674
+Administrative and supportive service activities,series2,value,0.047910167
+Administrative and supportive service activities,series2,ref,0.503160932
+Other services,series3,value,0.987848719
+Other services,series3,ref,0.426386631
+Manufacturing,series3,value,0.983661406
+Manufacturing,series3,ref,0.656803629
+Administrative,series3,value,0.209665614
+Administrative,series3,ref,-0.138300364
+Wholesale trade,series3,value,-0.017639664
+Wholesale trade,series3,ref,0.545809768
+Administrative and supportive service activities,series3,value,0.047910167
+Administrative and supportive service activities,series3,ref,0.127290739
+Construction,series3,value,0.681288045
+Construction,series3,ref,0.488025492
+Arts,series3,value,0.481757214
+Arts,series3,ref,0.029835392

bar-chart-horizontal-clustered-sm/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- TEMPLATE https://github.com/ONSvisual/census-charts/tree/main/bar-chart -->
+
+<head>
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
+  <title>Small-multiple Clustered Horizontal Bar Chart</title>
+
+  <meta name="template" content="bar-chart">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta charset="utf-8" />
+  <meta name="robots" content="noindex" />
+  <meta name="googlebot" content="indexifembedded" />
+
+  <link rel="stylesheet" href="../lib/globalStyle.css" />
+  <link rel="stylesheet" href="./chart.css" />
+</head>
+
+<body>
+
+  <h5 id="accessibleSummary" class="visuallyhidden"></h5>
+
+  <div aria-hidden="true" id="legend"></div>
+
+  <div id="graphic" aria-hidden="true">
+    <!-- <img src="fallback.png" alt="[Chart]" /> -->
+  </div>
+
+
+  <h5 id="source">
+  </h5>
+
+  <script src="https://cdn.ons.gov.uk/vendor/d3/6.3.0/d3.min.js" type="text/javascript"></script>
+  <script src="https://cdn.ons.gov.uk/vendor/pym/1.3.2/pym.js" type="text/javascript"></script>
+  <script src="./config.js"></script>
+  <script src="./script.js"></script>
+
+</body>
+
+</html>