From d95418833d59ae5922d8025e8eb000913917385d Mon Sep 17 00:00:00 2001
From: kiddhustle <kiddhustle@wiardweb.com>
Date: Wed, 16 Sep 2020 17:54:24 +0100
Subject: [PATCH 1/2] accessibilty fixes

---
 multimap/index.html   |  5 ++---
 multimap/js/script.js | 39 +++++++++++++++++++++++----------------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/multimap/index.html b/multimap/index.html
index fb8e8a6..db17b16 100644
--- a/multimap/index.html
+++ b/multimap/index.html
@@ -18,11 +18,9 @@
     })
     (window, document, 'script', 'dataLayer', 'GTM-MBCBVQS');
   </script>
-
-  <meta charset="UTF-8">
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>Multiple variables map</title>
-  <meta name='viewport' content='initial-scale=1,maximum-scale=1' />
+  <meta name='viewport' content='initial-scale=1' />
 
   <link href='css/mapbox-gl.css' rel='stylesheet' />
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
@@ -451,6 +449,7 @@
     }
 
     input[type='radio']:checked+label {
+      background: #206095;
       color: white;
     }
 
diff --git a/multimap/js/script.js b/multimap/js/script.js
index e7479d3..ca54c49 100644
--- a/multimap/js/script.js
+++ b/multimap/js/script.js
@@ -219,15 +219,15 @@ if(Modernizr.webgl) {
 
 
 			//Flatten data values and work out breaks
-			if(config.ons.breaks[a] =="jenks" || config.ons.breaks[a] =="equal") {
+			if(config.ons.breaks =="jenks" || config.ons.breaks =="equal") {
 				var values =  data.map(function(d) { return +d[variables[a]]; }).filter(function(d) {return !isNaN(d)}).sort(d3.ascending);
 			};
 
-			if(config.ons.breaks[a] =="jenks") {
+			if(config.ons.breaks =="jenks") {
 				breaks = [];
 
-				ss.ckmeans(values, (dvc.numberBreaks[a])).map(function(cluster,i) {
-					if(i<dvc.numberBreaks[a]-1) {
+				ss.ckmeans(values, (dvc.numberBreaks)).map(function(cluster,i) {
+					if(i<dvc.numberBreaks-1) {
 						breaks.push(cluster[0]);
 					} else {
 						breaks.push(cluster[0])
@@ -236,8 +236,8 @@ if(Modernizr.webgl) {
 					}
 				});
 			}
-			else if (config.ons.breaks[a] == "equal") {
-				breaks = ss.equalIntervalBreaks(values, dvc.numberBreaks[a]);
+			else if (config.ons.breaks == "equal") {
+				breaks = ss.equalIntervalBreaks(values, dvc.numberBreaks);
 			}
 			else {breaks = config.ons.breaks[a];};
 
@@ -248,20 +248,20 @@ if(Modernizr.webgl) {
 			});
 
 			//work out halfway point (for no data position)
-			midpoint = breaks[0] + ((breaks[dvc.numberBreaks[a]] - breaks[0])/2)
+			midpoint = breaks[0] + ((breaks[dvc.numberBreaks] - breaks[0])/2)
 
 		}
 
 		function setupScales() {
 			//set up d3 color scales
 			//Load colours
-			if(typeof dvc.varcolour[a] === 'string') {
-				color=chroma.scale(dvc.varcolour[a]).colors(dvc.numberBreaks[a])
+			if(typeof dvc.varcolour === 'string') {
+				color=chroma.scale(dvc.varcolour).colors(dvc.numberBreaks)
 				colour=[]
 				color.forEach(function(d){colour.push(chroma(d).darken(0.4).saturate(0.6).hex())})
-				// colour = colorbrewer[dvc.varcolour[a]][dvc.numberBreaks];
+				// colour = colorbrewer[dvc.varcolour][dvc.numberBreaks];
 			} else {
-				colour = dvc.varcolour[a];
+				colour = dvc.varcolour;
 			}
 
 			//set up d3 color scales
@@ -582,7 +582,7 @@ if(Modernizr.webgl) {
 
 			// Set up scales for legend
 			x = d3.scaleLinear()
-				.domain([breaks[0], breaks[dvc.numberBreaks[a]]]) /*range for data*/
+				.domain([breaks[0], breaks[dvc.numberBreaks]]) /*range for data*/
 				.range([0,keywidth-30]); /*range for pixels*/
 
 
@@ -756,10 +756,17 @@ if(Modernizr.webgl) {
 			var menuarea = d3.zip(areanames,areacodes).sort(function(a, b){ return d3.ascending(a[0], b[0]); });
 
 			// Build option menu for occupations
-			var optns = d3.select("#selectNav").append("div").attr("id","sel").append("select")
-				.attr("id","areaselect")
-				.attr("style","width:calc(100% - 6px)")
-				.attr("class","chosen-select");
+			var container = d3.select("#selectNav").append("div").attr("id", "sel")
+
+			var optns = container.append("select")
+				.attr("id", "areaselect")
+				.attr("style", "width:calc(100% - 6px)")
+				.attr("class", "chosen-select");
+
+			container.append('label')
+				.attr('for', 'areaselect')
+				.attr('class', 'visuallyhidden')
+				.text('Select an area');
 
 			optns.append("option")
 				// .attr("value","first")

From b9e7a4c5976bd16e31c684714432d1778edf8983 Mon Sep 17 00:00:00 2001
From: kiddhustle <kiddhustle@wiardweb.com>
Date: Thu, 17 Sep 2020 10:44:22 +0100
Subject: [PATCH 2/2] dvc724: PR feedback - mobile variable select

---
 multimap/js/script.js | 40 +++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/multimap/js/script.js b/multimap/js/script.js
index ca54c49..78f0ebd 100644
--- a/multimap/js/script.js
+++ b/multimap/js/script.js
@@ -195,17 +195,25 @@ if(Modernizr.webgl) {
 		// 	.on('click',function(d,i){onchange(i)})
 
 
-		selectgroup = d3.select('#selectnav')
-						.append('select')
-						.attr('class','dropdown')
-						.on('change', onselect)
-						.selectAll("option")
-						.data(dvc.varlabels)
-						.enter()
-						.append('option')
-						.attr("value", function(d,i){return i})
-						.property("selected", function(d, i) {return i===dvc.varload;})
-						.text(function(d,i){return dvc.varlabels[i]});
+			var container = d3.select('#selectnav')
+
+			container.append('label')
+				.attr('for', 'selectlistMobile')
+				.attr('class', 'visuallyhidden')
+				.text('Choose from selection');
+
+			selectgroup = container
+				.append('select')
+				.attr('class', 'dropdown')
+				.attr('id', 'selectlistMobile')
+				.on('change', onselect)
+				.selectAll("option")
+				.data(dvc.varlabels)
+				.enter()
+				.append('option')
+				.attr("value", function (d, i) { return i })
+				.property("selected", function (d, i) { return i === dvc.varload; })
+				.text(function (d, i) { return dvc.varlabels[i] });
 
 
 		}
@@ -756,18 +764,12 @@ if(Modernizr.webgl) {
 			var menuarea = d3.zip(areanames,areacodes).sort(function(a, b){ return d3.ascending(a[0], b[0]); });
 
 			// Build option menu for occupations
-			var container = d3.select("#selectNav").append("div").attr("id", "sel")
-
-			var optns = container.append("select")
+			var optns = d3.select("#selectNav").append("div").attr("id", "sel")
+				.append("select")
 				.attr("id", "areaselect")
 				.attr("style", "width:calc(100% - 6px)")
 				.attr("class", "chosen-select");
 
-			container.append('label')
-				.attr('for', 'areaselect')
-				.attr('class', 'visuallyhidden')
-				.text('Select an area');
-
 			optns.append("option")
 				// .attr("value","first")
 				// .text("");