D3 Examples - Simple Bar Chart

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