Simple Bar Chart

A simple bar chart for Felix, built with love

<!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>

https://d3js.org/d3.v4.min.js