stuwilmur · September 10, 2019 14:32
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <title>NSS</title>
 
 <meta charset="utf-8">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
 <!-- Load d3.js -->
 <script src="https://d3js.org/d3.v4.js"></script>
 <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>


 <style>

 	body{
 		font-family : Open Sans
 	}

 	.label{
 		font-size : 90%;
 	}
 	
 	.title{
 		font-size : 120%;
 	}
 	
 	.tooltip {
 		pointer-events: none;
 	}
 	
 	h1{
 		font-size : 150%;
 	}
 	
 	a:visited, a:link {
 		color: black;
 	}

 </style>

 </head>
 <body>
 <h1>UK Medical schools NSS data from the <a href = "https://www.officeforstudents.org.uk/advice-and-guidance/student-information-and-data/national-student-survey-nss/get-the-nss-data/">Office for Students</a>.</h1>
 <div id="question_viz"></div>
 <div id="provider_viz"></div>

 <script>

 var lineData = [40,50,60,70,80,90,100];

 var nestedProvider;
 var nestedQuestion;
 var svgProvider;
 var svgQuestion;

 var width = 1000;
 var height = 400;
 var heightProvider = 450;

 var PRN = "10007803";
 var Question = "Q01";

 var colours = {purple : "#3D52D5", grey : "#B4C5E4", darkgrey : "#FC7995", lightgrey : "#808082", black : "#000000"};
 var borderBottom = 100;
 var borderBottomProvider = 200;
 var borderLeft = 50;
 var borderTop = 40;
 var barMargin = 5;
 var likertHeight = 250;
 var likertWidth = 400;
 var innerRadius = 15;

 var tooltipQuestion = d3.select("#question_viz")
  .append("div")
  .style("opacity", 0)
  .attr("class", "tooltip")
  .attr("id", "tooltipQuestion")
  .style("background-color", "white")
  .style("border", "solid")
  .style("border-width", "0px")
  .style("border-radius", "0px")
  .style("padding", "5px")
  .style("position", "absolute")
  .style("font-family", "Open Sans")
  .style("font-size", "100%")
  
 var tooltipQuestionText = d3.select("#tooltipQuestion")
 						  .append("div");
  
 var tooltipQuestionSvg = d3.select("#tooltipQuestion")
 						.append("svg")
 						.attr("width", likertWidth)
 						.attr("height", likertHeight)
 						.append("g")
 						
  
 var tooltipProvider = d3.select("#provider_viz")
  .append("div")
  .style("opacity", 0)
  .attr("class", "tooltip")
  .attr("id", "tooltipProvider")
  .style("background-color", "white")
  .style("border", "solid")
  .style("border-width", "0px")
  .style("border-radius", "0px")
  .style("padding", "5px")
  .style("position", "absolute")
  .style("font-family", "Open Sans")
  .style("font-size", "100%")
  
 var likertScaleBorder = 20;
 var likertScale = d3.scaleLinear().domain([0, 100]).range([0, likertHeight - likertScaleBorder]);
 var likertScaleRev = d3.scaleLinear().domain([100, 0]).range([0, likertHeight - likertScaleBorder]);
  
 var tooltipProviderText = d3.select("#tooltipProvider")
 						  .append("div");
  
 var tooltipProviderSvg = d3.select("#tooltipProvider")
 						.append("svg")
 						.attr("width", likertWidth)
 						.attr("height", likertHeight)
 						.append("g")
 						
  
 d3.csv("nss_questions.csv", function(err, qdata)
 {
 	questionMap = qdata.reduce(function(map, obj) {
    map[obj["Question Number"]] = obj.Question;
    return map;
 }, {});
 });

 d3.csv('nss_medicine_data.csv', function(err, data)
 {	
 	nestedProvider = d3.nest()
 					.key(function(d) {return d.UKPRN;})
 					.key(function(d) {return d['Question Number'];})
 					.entries(data);
 					
 	nestedQuestion = d3.nest()
 					.key(function(d) {return d['Question Number'];})
 					.key(function(d) {return d.UKPRN;})
 					.entries(data);
 	
 	svgQuestion = d3.select("#question_viz")
 					.append("svg")
 					
 	svgQuestion.attr("width", width)
 					.attr("height", height);
 					
 	svgProvider = d3.select("#provider_viz")
 					.append("svg")
 					
 	svgProvider.attr("width", width)
 					.attr("height", heightProvider);
 					
 	svgQuestion.append("text")
 	.text("")
 	.attr("class", "title")
 	.attr("x", borderLeft)
 	.attr("y", borderTop - 5)
 	.attr("fill", colours.black);
 	
 	svgProvider.append("text")
 	.text("")
 	.attr("class", "title")
 	.attr("x", borderLeft)
 	.attr("y", borderTop - 5)
 	.attr("fill", colours.black);
 	
 	update();	
 })

 function getKeyValue(d, key, value)
 {
 	return d.values.filter(function(e) {return e.key == key})[0].values[0][value]
 }

 function getProvider()
 {
 	return nestedProvider.filter(function(e) {return e.key == PRN})[0].values[0].values[0].Provider;
 }

 function getQuestion()
 {
 	return nestedQuestion.filter(function(e) {return e.key == Question})[0].values[0].values[0]["Question Number"];
 }

 function compareProviders(a,b)
 {
 	return getKeyValue(b, Question, "Agree") - getKeyValue(a, Question, "Agree");
 }

 function barmouseoverQuestion(d,i)
 {	
 	d3.select(this)
 	.transition()
 	.attr('fill', colours.darkgrey);
 	tooltipQuestion.style("opacity", .9)
 }

 function barmouseoverProvider(d,i)
 {	
 	d3.select(this)
 	.transition()
 	.attr('fill', colours.darkgrey);
 	tooltipProvider.style("opacity", .9);
 }

 function barmouseoutQuestion(d,i)
 {	
 	d3.select(this)
 	.transition()
 	.attr('fill', d.key == Question ? colours.darkgrey : colours.grey);
 	tooltipQuestion.style("opacity", 0);
 }

 function barmouseoutProvider(d,i)
 {	
 	d3.select(this)
 	.transition()
 	.attr('fill', d.key == PRN ? colours.darkgrey : colours.grey);
 	tooltipProvider.style("opacity", 0);
 }

 function drawBar(svg, d, key)
 {
 	var likertData = [
 					{ key : 1, value : +getKeyValue(d, key, "Answered 1")},
 					{ key : 2, value : +getKeyValue(d, key, "Answered 2")},
 					{ key : 3, value : +getKeyValue(d, key, "Answered 3")},
 					{ key : 4, value : +getKeyValue(d, key, "Answered 4")},
 					{ key : 5, value : +getKeyValue(d, key, "Answered 5")},
 					]

 	var color = d3.scaleOrdinal()
 	.domain(likertData)
 	.range(d3.schemeSet2)
 	
 	var bars = 	svg.selectAll('.likert');

 	bars
 	.data(likertData)
 	.enter()
 	.append('rect')
 	.merge(bars)
 	.attr('fill', function(d){ return color(d.key) })
 	.attr('class','likert')
 	.attr("stroke", "black")
 	.style("stroke-width", "0px")
 	.attr("width", likertWidth / 5)
 	.attr("height", function(d) {return likertScale(d.value * 100);})
 	.attr("x", function(d,i) {return i * likertWidth / 5;})
 	.attr("y", function(d){return likertScale(100 - 100 * d.value) - likertScaleBorder})
 	.style("opacity", 1)	
 	
 	var barsText = 	svg.selectAll('.likerttext');

 	barsText
 	.data(likertData)
 	.enter()
 	.append('text')
 	.merge(barsText)
 	.attr('class','likerttext')
 	.attr("x", function(d,i) {return i * likertWidth / 5;})
 	.attr("y", 20)
 	.text(function(d,i) {return d.key + ": " + (d.value * 100).toFixed(1) + "%" })
 	.attr("font-size", "100%")
 	.style("opacity", 1)	
 	
 	/*var  barsLines = svg.selectAll("line");
 	barsLines.data(lineData)
 	.enter()
 	.append("line")
 	.merge(barsLines)
 	.attr("x1", likertScaleBorder)
 	.attr("x2", likertWidth + likertScaleBorder)
 	.attr("y1", function(d) {return likertScale(100 - d) - likertScaleBorder;})
 	.attr("y2", function(d) {return likertScale(100 - d) - likertScaleBorder;})
 	.attr("stroke", colours.lightgrey)
 	.attr("stroke-width", .5);
 	
 	var barsLinesText = svg.selectAll(".linestext");
 	
 	barsText
 	.data(lineData)
 	.enter()
 	.append("text")
 	.attr("class", "linestext")
 	.attr("x", likertScaleBorder)
 	.attr("y", function(d) {return likertScale(100 - d) - likertScaleBorder;})
 	.text(function(d) {return d + "%";})
 	.attr("font-size", "100%")
 	.attr("fill", colours.lightgrey)
 	.style("opacity", 1)	
 	
 	svg//.select(".yaxis")
 	.append("g")
 	.attr("transform", "translate(25," + -likertScaleBorder + ")")  
 	.call(d3.axisLeft(likertScaleRev));*/
 }

 function barmousemoveQuestion(d)
 {
  var text = getKeyValue(d, PRN, "Question Number") 
 			+ "<br/>"
 			+ "<em>" + questionMap[d.key] + "</em>"
 			+ "<br/><strong>Agree: "
 			+ (100 * getKeyValue(d, PRN, "Agree")).toFixed(2) + "%</strong>"
 			+ "<br/>Confidence interval: "
 			+ (100 * getKeyValue(d,PRN,"Confidence interval-min")).toFixed(2) + "%"
 			+ " - "
 			+ (100 * getKeyValue(d,PRN,"Confidence interval-max")).toFixed(2) + "%";
 			
  tooltipQuestionText
  .html(text)
  
  drawBar(tooltipQuestionSvg, d, PRN);
 	
  
  tooltipQuestion
  .style("left", (d3.mouse(this)[0]+20) + "px")
  .style("top", (d3.mouse(this)[1]+10) + "px")
 }

 function barmousemoveProvider(d)
 {
  var text = getKeyValue(d, Question, "Provider") 
 			+ "<br/><strong>Agree: "
 			+ (100 * getKeyValue(d, Question, "Agree")).toFixed(2) + "%</strong>"
 			+ "<br/>Confidence interval: "
 			+ (100 * getKeyValue(d,Question,"Confidence interval-min")).toFixed(2) + "%"
 			+ " - "
 			+ (100 * getKeyValue(d,Question,"Confidence interval-max")).toFixed(2) + "%";
   
  tooltipProvider
  tooltipProviderText.html(text)
  
    drawBar(tooltipProviderSvg, d, Question);
  
  tooltipProvider
  .style("left", (d3.mouse(this)[0]+20) + "px")
  .style("top", (d3.mouse(this)[1]+10 + height) + "px")
 }

 function clickQuestion(d,i)
 {
 	Question = d.key;
 	update();
 }

 function clickProvider(d,i)
 {
 	PRN = d.key;
 	update();
 }


 function update()
 {
 	nestedProvider = nestedProvider.sort(compareProviders);


 	var chartHeight = height - borderBottom - borderTop;
 	var chartHeightProvider = heightProvider - borderBottomProvider;
 	var chartWidth = width - borderLeft;
 	var scaleQuestion = d3.scaleLinear().domain([0, 100]).range([0, chartHeight]);
 	var scaleProvider = d3.scaleLinear().domain([0, 100]).range([0, chartHeightProvider]);
 	var scaleQuestionRev = d3.scaleLinear().domain([100, 0]).range([0, chartHeight]);
 	var scaleProviderRev = d3.scaleLinear().domain([100, 0]).range([0, chartHeightProvider]);
 	var blobRadius = 5;
 	
 	var barWidthQuestion = chartWidth / nestedQuestion.length - barMargin;
 	var barWidthProvider = chartWidth / nestedProvider.length - barMargin;
 	
 	var  barsQuestion = svgQuestion.selectAll("rect.question");
 		barsQuestion.data(nestedQuestion)
 		.enter()
 		.append("rect")
 		.merge(barsQuestion)
 		.on('mouseover', barmouseoverQuestion)
 		.on('mouseout', barmouseoutQuestion)
 		.on('mousemove', barmousemoveQuestion)
 		.on("click", clickQuestion)
 		.transition()
 		.attr("width", barWidthQuestion)
 		.attr("class","question")
 		.attr("height", function(d) {return scaleQuestion(100 * getKeyValue(d, PRN, "Confidence interval-max") - 100 * getKeyValue(d, PRN, "Confidence interval-min"));})
 		.attr("fill", function(d) {return d.key == Question ? colours.darkgrey : colours.grey;})
 		.attr("y", function(d) { return borderTop + scaleQuestion(100 - 100 * getKeyValue(d, PRN, "Confidence interval-max"));})
 		.attr("x", function(d,i) {return borderLeft + i * (barWidthQuestion + barMargin);})

 					
 	var  barsProvider = svgProvider.selectAll("rect.provider");
 		barsProvider.data(nestedProvider)
 		.enter()
 		.append("rect")
 		.merge(barsProvider)
 		.on('mouseover', barmouseoverProvider)
 		.on('mousemove', barmousemoveProvider)
 		.on('mouseout', barmouseoutProvider)
 		.on("click", clickProvider)
 		.transition()
 		.attr("width", barWidthProvider)
 		.attr("class","provider")
 		.attr("height", function(d) {return scaleQuestion(100 * getKeyValue(d, Question, "Confidence interval-max") - 100 * getKeyValue(d, Question, "Confidence interval-min"));})
 		.attr("fill", function(d) {return d.key == PRN ? colours.darkgrey : colours.grey;})
 		.attr("y", function(d) { return borderTop + scaleProvider(100 - 100 * getKeyValue(d, Question, "Confidence interval-max"));})
 		.attr("x", function(d,i) {return borderLeft + i * (barWidthProvider + barMargin);})

 					
 	var  blobsQuestion = svgQuestion.selectAll("circle.question");
 		blobsQuestion.data(nestedQuestion)
 		.enter()
 		.append("circle")
 		.merge(blobsQuestion)
 		.on("click", clickQuestion)
 		.transition()
 		.attr("class", "question")
 		.attr("r", blobRadius)
 		.attr("fill", colours.purple)
 		.attr("cy", function(d) { return borderTop + scaleQuestion(100 - 100 * getKeyValue(d, PRN, "Agree"));})
 		.attr("cx", function(d,i) {return borderLeft + barWidthQuestion * .5 + i * (barWidthQuestion + barMargin);});
 					
 	var  blobsProvider = svgProvider.selectAll("circle.provider");
 		blobsProvider.data(nestedProvider)
 		.enter()
 		.append("circle")
 		.merge(blobsProvider)
 		.on("click", clickProvider)
 		.transition()
 		.attr("class","provider")
 		.attr("r", blobRadius)
 		.attr("fill", colours.purple)
 		.attr("cy", function(d) { return borderTop + scaleProvider(100 - 100 * getKeyValue(d, Question, "Agree"));})
 		.attr("cx", function(d,i) {return borderLeft + barWidthProvider * .5 + i * (barWidthProvider + barMargin);});
 				
 	var textQuestion = svgQuestion.selectAll("text.label");
 		textQuestion.data(nestedQuestion)
 		.enter()
 		.append("text")
 		.merge(textQuestion)
 		.on("click", clickQuestion)
 		.transition()
 		.attr("class", "label")
 		.text(function(d) {return getKeyValue(d, PRN, "Question Number");})
 		.attr("y", chartHeight)
 		.attr("fill", colours.black)
 		.attr("x", -height)
 		.attr("font-weight", function(d) {return d.key == Question ? "bold" : "normal";})
 		.attr("y", function(d,i) {return borderLeft + + barWidthQuestion * .5 + i * (barWidthQuestion + barMargin);})
 		.attr("alignment-baseline", "middle")
 		.attr("transform", "rotate(-90)")

 			
 	var textProvider = svgProvider.selectAll("text.label");
 		textProvider.data(nestedProvider)
 		.enter()
 		.append("text")
 		.merge(textProvider)
 		.on("click", clickProvider)
 		.transition()
 		.attr("class", "label")
 		.text(function(d) {return getKeyValue(d, Question, "Provider");})
 		.attr("y", chartHeight)
 		.attr("fill", colours.black)
 		.attr("x", -heightProvider)
 		.attr("font-weight", function(d) {return d.key == PRN ? "bold" : "normal";})
 		.attr("y", function(d,i) {return borderLeft + barWidthProvider * 0.5 + i * (barWidthProvider + barMargin);})
 		.attr("transform", "rotate(-90)")
 		
 	var titleQuestion = svgQuestion.selectAll("text.title");
 	
 	titleQuestion
 	.transition()
 	.text("Performance of " + getProvider() + " across all questions")
 	
 	var titleProvider = svgProvider.selectAll("text.title");
 	
 	titleProvider
 	.transition()
 	.text("Performance of all institutions on question " + getQuestion() + ": " + questionMap[Question]);

 	/*svgQuestion//.select(".yaxis")
 	.append("g")
 	.attr("transform", "translate("+borderLeft + ", " + borderTop+")")  
 	.call(d3.axisLeft(scaleQuestionRev));
 	
 	svgProvider//.select(".yaxis")
 	.append("g")
 	.attr("transform", "translate("+borderLeft + ", " + borderTop+")")   
 	.call(d3.axisLeft(scaleProviderRev));*/
 	
 	var  linesQuestion = svgQuestion.selectAll("line");
 	linesQuestion.data(lineData)
 	.enter()
 	.append("line")
 	.merge(linesQuestion)
 	.attr("x1", borderLeft)
 	.attr("x2", chartWidth + borderLeft)
 	.attr("y1", function(d) {return borderTop + scaleQuestion(100 - d);})
 	.attr("y2", function(d) {return borderTop + scaleQuestion(100 - d);})
 	.attr("stroke", colours.lightgrey)
 	.attr("stroke-width", .5);
 	
 	var  linesProvider = svgProvider.selectAll("line");
 	linesProvider.data(lineData)
 	.enter()
 	.append("line")
 	.merge(linesProvider)
 	.attr("x1", borderLeft)
 	.attr("x2", chartWidth + borderLeft)
 	.attr("y1", function(d) {return borderTop + scaleProvider(100 - d);})
 	.attr("y2", function(d) {return borderTop + scaleProvider(100 - d);})
 	.attr("stroke", colours.lightgrey)
 	.attr("stroke-width", .5);
 	
 	var linestTextQuestion = svgQuestion.selectAll(".linestext");
 	
 	linestTextQuestion
 	.data(lineData)
 	.enter()
 	.append("text")
 	.attr("class", "linestext")
 	.attr("x", 0)
 	.attr("y", function(d) {return borderTop + scaleQuestion(100 - d);})
 	.text(function(d) {return d + "%";})
 	.attr("font-size", "100%")
 	.attr("fill", colours.lightgrey)
 	.style("opacity", 1)	
 	
 	var linestTextProvider = svgProvider.selectAll(".linestext");
 	
 	linestTextProvider
 	.data(lineData)
 	.enter()
 	.append("text")
 	.attr("class", "linestext")
 	.attr("x", 0)
 	.attr("y", function(d) {return borderTop + scaleProvider(100 - d);})
 	.text(function(d) {return d + "%";})
 	.attr("font-size", "100%")
 	.attr("fill", colours.lightgrey)
 	.style("opacity", 1)	
 	
 }


 </script>
 </body>
 </html>
diff --git a/nss_medicine_data.csv b/nss_medicine_data.csv
diff --git a/nss_medicine_data.xlsx b/nss_medicine_data.xlsx
diff --git a/nss_questions.csv b/nss_questions.csv
diff --git a/test.txt b/test.txt
 test
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>NSS</title>

	<meta charset="utf-8">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
	<!-- Load d3.js -->
	<script src="https://d3js.org/d3.v4.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>


	<style>

	body{
	font-family : Open Sans
	}

	.label{
	font-size : 90%;
	}

	.title{
	font-size : 120%;
	}

	.tooltip {
	pointer-events: none;
	}

	h1{
	font-size : 150%;
	}

	a:visited, a:link {
	color: black;
	}

	</style>

	</head>
	<body>
	<h1>UK Medical schools NSS data from the <a href = "https://www.officeforstudents.org.uk/advice-and-guidance/student-information-and-data/national-student-survey-nss/get-the-nss-data/">Office for Students</a>.</h1>
	<div id="question_viz"></div>
	<div id="provider_viz"></div>

	<script>

	var lineData = [40,50,60,70,80,90,100];

	var nestedProvider;
	var nestedQuestion;
	var svgProvider;
	var svgQuestion;

	var width = 1000;
	var height = 400;
	var heightProvider = 450;

	var PRN = "10007803";
	var Question = "Q01";

	var colours = {purple : "#3D52D5", grey : "#B4C5E4", darkgrey : "#FC7995", lightgrey : "#808082", black : "#000000"};
	var borderBottom = 100;
	var borderBottomProvider = 200;
	var borderLeft = 50;
	var borderTop = 40;
	var barMargin = 5;
	var likertHeight = 250;
	var likertWidth = 400;
	var innerRadius = 15;

	var tooltipQuestion = d3.select("#question_viz")
	.append("div")
	.style("opacity", 0)
	.attr("class", "tooltip")
	.attr("id", "tooltipQuestion")
	.style("background-color", "white")
	.style("border", "solid")
	.style("border-width", "0px")
	.style("border-radius", "0px")
	.style("padding", "5px")
	.style("position", "absolute")
	.style("font-family", "Open Sans")
	.style("font-size", "100%")

	var tooltipQuestionText = d3.select("#tooltipQuestion")
	.append("div");

	var tooltipQuestionSvg = d3.select("#tooltipQuestion")
	.append("svg")
	.attr("width", likertWidth)
	.attr("height", likertHeight)
	.append("g")


	var tooltipProvider = d3.select("#provider_viz")
	.append("div")
	.style("opacity", 0)
	.attr("class", "tooltip")
	.attr("id", "tooltipProvider")
	.style("background-color", "white")
	.style("border", "solid")
	.style("border-width", "0px")
	.style("border-radius", "0px")
	.style("padding", "5px")
	.style("position", "absolute")
	.style("font-family", "Open Sans")
	.style("font-size", "100%")

	var likertScaleBorder = 20;
	var likertScale = d3.scaleLinear().domain([0, 100]).range([0, likertHeight - likertScaleBorder]);
	var likertScaleRev = d3.scaleLinear().domain([100, 0]).range([0, likertHeight - likertScaleBorder]);

	var tooltipProviderText = d3.select("#tooltipProvider")
	.append("div");

	var tooltipProviderSvg = d3.select("#tooltipProvider")
	.append("svg")
	.attr("width", likertWidth)
	.attr("height", likertHeight)
	.append("g")


	d3.csv("nss_questions.csv", function(err, qdata)
	{
	questionMap = qdata.reduce(function(map, obj) {
	map[obj["Question Number"]] = obj.Question;
	return map;
	}, {});
	});

	d3.csv('nss_medicine_data.csv', function(err, data)
	{
	nestedProvider = d3.nest()
	.key(function(d) {return d.UKPRN;})
	.key(function(d) {return d['Question Number'];})
	.entries(data);

	nestedQuestion = d3.nest()
	.key(function(d) {return d['Question Number'];})
	.key(function(d) {return d.UKPRN;})
	.entries(data);

	svgQuestion = d3.select("#question_viz")
	.append("svg")

	svgQuestion.attr("width", width)
	.attr("height", height);

	svgProvider = d3.select("#provider_viz")
	.append("svg")

	svgProvider.attr("width", width)
	.attr("height", heightProvider);

	svgQuestion.append("text")
	.text("")
	.attr("class", "title")
	.attr("x", borderLeft)
	.attr("y", borderTop - 5)
	.attr("fill", colours.black);

	svgProvider.append("text")
	.text("")
	.attr("class", "title")
	.attr("x", borderLeft)
	.attr("y", borderTop - 5)
	.attr("fill", colours.black);

	update();
	})

	function getKeyValue(d, key, value)
	{
	return d.values.filter(function(e) {return e.key == key})[0].values[0][value]
	}

	function getProvider()
	{
	return nestedProvider.filter(function(e) {return e.key == PRN})[0].values[0].values[0].Provider;
	}

	function getQuestion()
	{
	return nestedQuestion.filter(function(e) {return e.key == Question})[0].values[0].values[0]["Question Number"];
	}

	function compareProviders(a,b)
	{
	return getKeyValue(b, Question, "Agree") - getKeyValue(a, Question, "Agree");
	}

	function barmouseoverQuestion(d,i)
	{
	d3.select(this)
	.transition()
	.attr('fill', colours.darkgrey);
	tooltipQuestion.style("opacity", .9)
	}

	function barmouseoverProvider(d,i)
	{
	d3.select(this)
	.transition()
	.attr('fill', colours.darkgrey);
	tooltipProvider.style("opacity", .9);
	}

	function barmouseoutQuestion(d,i)
	{
	d3.select(this)
	.transition()
	.attr('fill', d.key == Question ? colours.darkgrey : colours.grey);
	tooltipQuestion.style("opacity", 0);
	}

	function barmouseoutProvider(d,i)
	{
	d3.select(this)
	.transition()
	.attr('fill', d.key == PRN ? colours.darkgrey : colours.grey);
	tooltipProvider.style("opacity", 0);
	}

	function drawBar(svg, d, key)
	{
	var likertData = [
	{ key : 1, value : +getKeyValue(d, key, "Answered 1")},
	{ key : 2, value : +getKeyValue(d, key, "Answered 2")},
	{ key : 3, value : +getKeyValue(d, key, "Answered 3")},
	{ key : 4, value : +getKeyValue(d, key, "Answered 4")},
	{ key : 5, value : +getKeyValue(d, key, "Answered 5")},
	]

	var color = d3.scaleOrdinal()
	.domain(likertData)
	.range(d3.schemeSet2)

	var bars = svg.selectAll('.likert');

	bars
	.data(likertData)
	.enter()
	.append('rect')
	.merge(bars)
	.attr('fill', function(d){ return color(d.key) })
	.attr('class','likert')
	.attr("stroke", "black")
	.style("stroke-width", "0px")
	.attr("width", likertWidth / 5)
	.attr("height", function(d) {return likertScale(d.value * 100);})
	.attr("x", function(d,i) {return i * likertWidth / 5;})
	.attr("y", function(d){return likertScale(100 - 100 * d.value) - likertScaleBorder})
	.style("opacity", 1)

	var barsText = svg.selectAll('.likerttext');

	barsText
	.data(likertData)
	.enter()
	.append('text')
	.merge(barsText)
	.attr('class','likerttext')
	.attr("x", function(d,i) {return i * likertWidth / 5;})
	.attr("y", 20)
	.text(function(d,i) {return d.key + ": " + (d.value * 100).toFixed(1) + "%" })
	.attr("font-size", "100%")
	.style("opacity", 1)

	/*var barsLines = svg.selectAll("line");
	barsLines.data(lineData)
	.enter()
	.append("line")
	.merge(barsLines)
	.attr("x1", likertScaleBorder)
	.attr("x2", likertWidth + likertScaleBorder)
	.attr("y1", function(d) {return likertScale(100 - d) - likertScaleBorder;})
	.attr("y2", function(d) {return likertScale(100 - d) - likertScaleBorder;})
	.attr("stroke", colours.lightgrey)
	.attr("stroke-width", .5);

	var barsLinesText = svg.selectAll(".linestext");

	barsText
	.data(lineData)
	.enter()
	.append("text")
	.attr("class", "linestext")
	.attr("x", likertScaleBorder)
	.attr("y", function(d) {return likertScale(100 - d) - likertScaleBorder;})
	.text(function(d) {return d + "%";})
	.attr("font-size", "100%")
	.attr("fill", colours.lightgrey)
	.style("opacity", 1)

	svg//.select(".yaxis")
	.append("g")
	.attr("transform", "translate(25," + -likertScaleBorder + ")")
	.call(d3.axisLeft(likertScaleRev));*/
	}

	function barmousemoveQuestion(d)
	{
	var text = getKeyValue(d, PRN, "Question Number")
	+ "<br/>"
	+ "<em>" + questionMap[d.key] + "</em>"
	+ "<br/><strong>Agree: "
	+ (100 * getKeyValue(d, PRN, "Agree")).toFixed(2) + "%</strong>"
	+ "<br/>Confidence interval: "
	+ (100 * getKeyValue(d,PRN,"Confidence interval-min")).toFixed(2) + "%"
	+ " - "
	+ (100 * getKeyValue(d,PRN,"Confidence interval-max")).toFixed(2) + "%";

	tooltipQuestionText
	.html(text)

	drawBar(tooltipQuestionSvg, d, PRN);


	tooltipQuestion
	.style("left", (d3.mouse(this)[0]+20) + "px")
	.style("top", (d3.mouse(this)[1]+10) + "px")
	}

	function barmousemoveProvider(d)
	{
	var text = getKeyValue(d, Question, "Provider")
	+ "<br/><strong>Agree: "
	+ (100 * getKeyValue(d, Question, "Agree")).toFixed(2) + "%</strong>"
	+ "<br/>Confidence interval: "
	+ (100 * getKeyValue(d,Question,"Confidence interval-min")).toFixed(2) + "%"
	+ " - "
	+ (100 * getKeyValue(d,Question,"Confidence interval-max")).toFixed(2) + "%";

	tooltipProvider
	tooltipProviderText.html(text)

	drawBar(tooltipProviderSvg, d, Question);

	tooltipProvider
	.style("left", (d3.mouse(this)[0]+20) + "px")
	.style("top", (d3.mouse(this)[1]+10 + height) + "px")
	}

	function clickQuestion(d,i)
	{
	Question = d.key;
	update();
	}

	function clickProvider(d,i)
	{
	PRN = d.key;
	update();
	}


	function update()
	{
	nestedProvider = nestedProvider.sort(compareProviders);


	var chartHeight = height - borderBottom - borderTop;
	var chartHeightProvider = heightProvider - borderBottomProvider;
	var chartWidth = width - borderLeft;
	var scaleQuestion = d3.scaleLinear().domain([0, 100]).range([0, chartHeight]);
	var scaleProvider = d3.scaleLinear().domain([0, 100]).range([0, chartHeightProvider]);
	var scaleQuestionRev = d3.scaleLinear().domain([100, 0]).range([0, chartHeight]);
	var scaleProviderRev = d3.scaleLinear().domain([100, 0]).range([0, chartHeightProvider]);
	var blobRadius = 5;

	var barWidthQuestion = chartWidth / nestedQuestion.length - barMargin;
	var barWidthProvider = chartWidth / nestedProvider.length - barMargin;

	var barsQuestion = svgQuestion.selectAll("rect.question");
	barsQuestion.data(nestedQuestion)
	.enter()
	.append("rect")
	.merge(barsQuestion)
	.on('mouseover', barmouseoverQuestion)
	.on('mouseout', barmouseoutQuestion)
	.on('mousemove', barmousemoveQuestion)
	.on("click", clickQuestion)
	.transition()
	.attr("width", barWidthQuestion)
	.attr("class","question")
	.attr("height", function(d) {return scaleQuestion(100 * getKeyValue(d, PRN, "Confidence interval-max") - 100 * getKeyValue(d, PRN, "Confidence interval-min"));})
	.attr("fill", function(d) {return d.key == Question ? colours.darkgrey : colours.grey;})
	.attr("y", function(d) { return borderTop + scaleQuestion(100 - 100 * getKeyValue(d, PRN, "Confidence interval-max"));})
	.attr("x", function(d,i) {return borderLeft + i * (barWidthQuestion + barMargin);})


	var barsProvider = svgProvider.selectAll("rect.provider");
	barsProvider.data(nestedProvider)
	.enter()
	.append("rect")
	.merge(barsProvider)
	.on('mouseover', barmouseoverProvider)
	.on('mousemove', barmousemoveProvider)
	.on('mouseout', barmouseoutProvider)
	.on("click", clickProvider)
	.transition()
	.attr("width", barWidthProvider)
	.attr("class","provider")
	.attr("height", function(d) {return scaleQuestion(100 * getKeyValue(d, Question, "Confidence interval-max") - 100 * getKeyValue(d, Question, "Confidence interval-min"));})
	.attr("fill", function(d) {return d.key == PRN ? colours.darkgrey : colours.grey;})
	.attr("y", function(d) { return borderTop + scaleProvider(100 - 100 * getKeyValue(d, Question, "Confidence interval-max"));})
	.attr("x", function(d,i) {return borderLeft + i * (barWidthProvider + barMargin);})


	var blobsQuestion = svgQuestion.selectAll("circle.question");
	blobsQuestion.data(nestedQuestion)
	.enter()
	.append("circle")
	.merge(blobsQuestion)
	.on("click", clickQuestion)
	.transition()
	.attr("class", "question")
	.attr("r", blobRadius)
	.attr("fill", colours.purple)
	.attr("cy", function(d) { return borderTop + scaleQuestion(100 - 100 * getKeyValue(d, PRN, "Agree"));})
	.attr("cx", function(d,i) {return borderLeft + barWidthQuestion * .5 + i * (barWidthQuestion + barMargin);});

	var blobsProvider = svgProvider.selectAll("circle.provider");
	blobsProvider.data(nestedProvider)
	.enter()
	.append("circle")
	.merge(blobsProvider)
	.on("click", clickProvider)
	.transition()
	.attr("class","provider")
	.attr("r", blobRadius)
	.attr("fill", colours.purple)
	.attr("cy", function(d) { return borderTop + scaleProvider(100 - 100 * getKeyValue(d, Question, "Agree"));})
	.attr("cx", function(d,i) {return borderLeft + barWidthProvider * .5 + i * (barWidthProvider + barMargin);});

	var textQuestion = svgQuestion.selectAll("text.label");
	textQuestion.data(nestedQuestion)
	.enter()
	.append("text")
	.merge(textQuestion)
	.on("click", clickQuestion)
	.transition()
	.attr("class", "label")
	.text(function(d) {return getKeyValue(d, PRN, "Question Number");})
	.attr("y", chartHeight)
	.attr("fill", colours.black)
	.attr("x", -height)
	.attr("font-weight", function(d) {return d.key == Question ? "bold" : "normal";})
	.attr("y", function(d,i) {return borderLeft + + barWidthQuestion * .5 + i * (barWidthQuestion + barMargin);})
	.attr("alignment-baseline", "middle")
	.attr("transform", "rotate(-90)")


	var textProvider = svgProvider.selectAll("text.label");
	textProvider.data(nestedProvider)
	.enter()
	.append("text")
	.merge(textProvider)
	.on("click", clickProvider)
	.transition()
	.attr("class", "label")
	.text(function(d) {return getKeyValue(d, Question, "Provider");})
	.attr("y", chartHeight)
	.attr("fill", colours.black)
	.attr("x", -heightProvider)
	.attr("font-weight", function(d) {return d.key == PRN ? "bold" : "normal";})
	.attr("y", function(d,i) {return borderLeft + barWidthProvider * 0.5 + i * (barWidthProvider + barMargin);})
	.attr("transform", "rotate(-90)")

	var titleQuestion = svgQuestion.selectAll("text.title");

	titleQuestion
	.transition()
	.text("Performance of " + getProvider() + " across all questions")

	var titleProvider = svgProvider.selectAll("text.title");

	titleProvider
	.transition()
	.text("Performance of all institutions on question " + getQuestion() + ": " + questionMap[Question]);

	/*svgQuestion//.select(".yaxis")
	.append("g")
	.attr("transform", "translate("+borderLeft + ", " + borderTop+")")
	.call(d3.axisLeft(scaleQuestionRev));

	svgProvider//.select(".yaxis")
	.append("g")
	.attr("transform", "translate("+borderLeft + ", " + borderTop+")")
	.call(d3.axisLeft(scaleProviderRev));*/

	var linesQuestion = svgQuestion.selectAll("line");
	linesQuestion.data(lineData)
	.enter()
	.append("line")
	.merge(linesQuestion)
	.attr("x1", borderLeft)
	.attr("x2", chartWidth + borderLeft)
	.attr("y1", function(d) {return borderTop + scaleQuestion(100 - d);})
	.attr("y2", function(d) {return borderTop + scaleQuestion(100 - d);})
	.attr("stroke", colours.lightgrey)
	.attr("stroke-width", .5);

	var linesProvider = svgProvider.selectAll("line");
	linesProvider.data(lineData)
	.enter()
	.append("line")
	.merge(linesProvider)
	.attr("x1", borderLeft)
	.attr("x2", chartWidth + borderLeft)
	.attr("y1", function(d) {return borderTop + scaleProvider(100 - d);})
	.attr("y2", function(d) {return borderTop + scaleProvider(100 - d);})
	.attr("stroke", colours.lightgrey)
	.attr("stroke-width", .5);

	var linestTextQuestion = svgQuestion.selectAll(".linestext");

	linestTextQuestion
	.data(lineData)
	.enter()
	.append("text")
	.attr("class", "linestext")
	.attr("x", 0)
	.attr("y", function(d) {return borderTop + scaleQuestion(100 - d);})
	.text(function(d) {return d + "%";})
	.attr("font-size", "100%")
	.attr("fill", colours.lightgrey)
	.style("opacity", 1)

	var linestTextProvider = svgProvider.selectAll(".linestext");

	linestTextProvider
	.data(lineData)
	.enter()
	.append("text")
	.attr("class", "linestext")
	.attr("x", 0)
	.attr("y", function(d) {return borderTop + scaleProvider(100 - d);})
	.text(function(d) {return d + "%";})
	.attr("font-size", "100%")
	.attr("fill", colours.lightgrey)
	.style("opacity", 1)

	}


	</script>
	</body>
	</html>
	Question Number	Question
	Q01	Staff are good at explaining things
	Q02	Staff have made the subject interesting
	Q03	The course is intellectually stimulating
	Q04	My course has challenged me to achieve my best work
	Q05	My course has provided me with opportunities to explore ideas or concepts in depth
	Q06	My course has provided me with opportunities to bring information and ideas together from different topics
	Q07	My course has provided me with opportunities to apply what I have learnt
	Q08	The criteria used in marking have been clear in advance
	Q09	Marking and assessment has been fair
	Q10	Feedback on my work has been timely
	Q11	I have received helpful comments on my work
	Q12	I have been able to contact staff when I needed to
	Q13	I have received sufficient advice and guidance in relation to my course
	Q14	Good advice was available when I needed to make study choices on my course
	Q15	The course is well organised and running smoothly
	Q16	The timetable works efficiently for me
	Q17	Any changes in the course or teaching have been communicated effectively
	Q18	The IT resources and facilities provided have supported my learning well
	Q19	The library resources (e.g. books, online services and learning spaces) have supported my learning well
	Q20	I have been able to access course-specific resources (e.g. equipment, facilities, software, collections) when I needed to
	Q21	I feel part of a community of staff and students
	Q22	I have had the right opportunities to work with other students as part of my course
	Q23	I have had the right opportunities to provide feedback on my course
	Q24	Staff value students’ views and opinions about the course
	Q25	It is clear how students’ feedback on the course has been acted on
	Q26	The students’ union (association or guild) effectively represents students’ academic interests
	Q27	Overall, I am satisfied with the quality of the course
	Scale01	The teaching on my course
	Scale02	Learning opportunities
	Scale03	Assessment and feedback
	Scale04	Academic support
	Scale05	Organisation and management
	Scale06	Learning community
	Scale07	Learning resources
	Scale08	Student voice