tlfrd · January 1, 2020 08:36
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    text {
      font-size: 14px;
    }
    
    .title {
      font-family: sans-serif;
      font-size: 16px;
    }
    
    rect {
      fill: grey;
      stroke: black;
    }
    
    line {
      stroke: black;
      opacity: 1;
    }
  </style>
 </head>

 <body>
  <script>
    var margin = {top: 75, right: 150, bottom: 75, left: 200};
    
    var width = 960 - margin.left - margin.right,
       height = 500 - margin.top - margin.bottom;
    
   var svg = d3.select("body").append("svg")
   	 .attr("width", width + margin.left + margin.right)
   	 .attr("height", height + margin.top + margin.bottom)
     .append("g")
   	   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    d3.csv("staffsurvey-belowavg.csv", (error, data) => {
      if (error) throw error;
      
      data = data.sort((a, b) => {
        if (a["Below Average"] < b["Below Average"]) return 1;
        if (a["Below Average"] > b["Below Average"]) return -1;
        if (a["Below Average"] == b["Below Average"]) return 0;
      });
      
      var title = svg.append("text")
      	.attr("class", "title")
      	.attr("text-anchor", "middle")
      	.attr("x", width / 2)
      	.attr("y", -margin.top / 4)
      	.text("Number of Questions With Answers Below Imperial Avg Per Department")
      
      var xScale = d3.scaleLinear()
      	.range([0, width])
      	.domain([0, d3.max(data, d => d["Below Average"])]);
      
      var yScale = d3.scaleBand()
      	.range([0, height])
      	.domain(data.map(d => d.Department))
      
      var yAxis = d3.axisLeft(yScale)
      	.tickSize(0);
            
      var yAxisGroup = svg.append("g")
      	.attr("class", "y-axis")
      	.call(yAxis)
      	.selectAll("text")
      		.attr("x", -10);
      
      var xAxis = d3.axisBottom(xScale.nice())
      	.ticks(10)
      	.tickSize(0);
      
      var xAxisGroup = svg.append("g")
      	.attr("class", "x-axis")
      	.attr("transform", "translate(" + [0, height] + ")")
      	.call(xAxis)
      
      xAxisGroup.select(".domain")
      	.attr("opacity", 0);
      
      xAxisGroup.selectAll("text")
      	.attr("y", 10)
      
      var xGridLines = svg.append("g")
      	.attr("class", "x-grid-lines")
      	.selectAll("line")
      	.data(xScale.nice().ticks(10)).enter()
      	.append("line")
      		.attr("y1", 0)
      		.attr("y2", height)
      		.attr("x2", d => xScale(d))
      		.attr("x1", d => xScale(d));
      
      var bars = svg.selectAll("rect")
      	.data(data).enter()
      	.append("rect")
      		.attr("y", d => yScale(d.Department))
      		.attr("width", d => xScale(d["Below Average"]))
      		.attr("height", yScale.bandwidth());
      
    });
    
    
    function drawBarChart() {
      
    }

  </script>
 </body>
diff --git a/staffsurvey-belowavg.csv b/staffsurvey-belowavg.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

	text {
	font-size: 14px;
	}

	.title {
	font-family: sans-serif;
	font-size: 16px;
	}

	rect {
	fill: grey;
	stroke: black;
	}

	line {
	stroke: black;
	opacity: 1;
	}
	</style>
	</head>

	<body>
	<script>
	var margin = {top: 75, right: 150, bottom: 75, left: 200};

	var width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.csv("staffsurvey-belowavg.csv", (error, data) => {
	if (error) throw error;

	data = data.sort((a, b) => {
	if (a["Below Average"] < b["Below Average"]) return 1;
	if (a["Below Average"] > b["Below Average"]) return -1;
	if (a["Below Average"] == b["Below Average"]) return 0;
	});

	var title = svg.append("text")
	.attr("class", "title")
	.attr("text-anchor", "middle")
	.attr("x", width / 2)
	.attr("y", -margin.top / 4)
	.text("Number of Questions With Answers Below Imperial Avg Per Department")

	var xScale = d3.scaleLinear()
	.range([0, width])
	.domain([0, d3.max(data, d => d["Below Average"])]);

	var yScale = d3.scaleBand()
	.range([0, height])
	.domain(data.map(d => d.Department))

	var yAxis = d3.axisLeft(yScale)
	.tickSize(0);

	var yAxisGroup = svg.append("g")
	.attr("class", "y-axis")
	.call(yAxis)
	.selectAll("text")
	.attr("x", -10);

	var xAxis = d3.axisBottom(xScale.nice())
	.ticks(10)
	.tickSize(0);

	var xAxisGroup = svg.append("g")
	.attr("class", "x-axis")
	.attr("transform", "translate(" + [0, height] + ")")
	.call(xAxis)

	xAxisGroup.select(".domain")
	.attr("opacity", 0);

	xAxisGroup.selectAll("text")
	.attr("y", 10)

	var xGridLines = svg.append("g")
	.attr("class", "x-grid-lines")
	.selectAll("line")
	.data(xScale.nice().ticks(10)).enter()
	.append("line")
	.attr("y1", 0)
	.attr("y2", height)
	.attr("x2", d => xScale(d))
	.attr("x1", d => xScale(d));

	var bars = svg.selectAll("rect")
	.data(data).enter()
	.append("rect")
	.attr("y", d => yScale(d.Department))
	.attr("width", d => xScale(d["Below Average"]))
	.attr("height", yScale.bandwidth());

	});


	function drawBarChart() {

	}

	</script>
	</body>
	Department	Below Average
	CEP	34
	Chem	27
	Life Science	46
	Maths	27
	Physics	32
	Grantham	1
	Medicine	51
	Aero	53
	Bioeng	18
	Chem Eng	22
	Civil	22
	Computing	50
	Earth Science	12
	EEE	30
	Materials	27
	Dyson	20