HW4-Bar Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> 
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .chart rect {
      //fill: steelblue;
    }
    
    .chart text {
      fill: black;
      font: 10px sans-serif;
    }
    
    .axis {font: 14px calibri;}
  	.label {font: 10px calibri;}
  </style>
</head>

<body>
  <div>
    <svg class="chart" width="960" height="525"></svg>
  </div>
  <script>
    var colorScale2 = d3.scaleSequential(d3.interpolateOranges).domain([height, 0]);
    
    //Adding margins, outer size subtract margins = inner size available for graph
    var svg = d3.select(".chart"),
        margin = {top:20, right:30, bottom:50, left:40},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;
    
    //scaleBand are like ordinal scales except the output range is continuous and numeric.
    var x = d3.scaleBand()
    	.range([0, width], .1);
    
    //scaleLinear serve to encode quantitative data
    var y = d3.scaleLinear()
    	.rangeRound([height, 0]); //Moving x-axis to bottom
    
    var colorScale2 = d3.scaleSequential(d3.interpolateOranges).domain([height, 0]);
    
    var xAxis = d3.axisBottom(x);
    
    var yAxis = d3.axisLeft(y).ticks(10,"#");
    
    var chart = d3.select(".chart")
    .attr("width", width + margin.left + margin.right) //Set width back to original value
    .attr("height", height + margin.top + margin.bottom) //Set height back to original value
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Adds margin to the left and top?
    
    d3.csv("AidData.csv", function(d){
      //Convert purpose_code_frequency from text to integer
      d.purpose_code_frequency = +d.purpose_code_frequency; 
      return d;
    },function(error, data) {
      if (error) throw error;
      
      //Constructing domain for categorical data range on x-axis
      x.domain(data.map(function(d){return d.coalesced_purpose_code;}));
      
      //Constructing domain for quantitative data range on y-axis
      y.domain([0, d3.max(data, function(d) { return d.purpose_code_frequency; })]);
      
      var barWidth = width / data.length;
      
      var bar = chart.selectAll("g")
      	.data(data)
    		.enter()
  			.append("g")
      	.attr("transform", function(d) { //Moving x-axis to bottom
          return "translate(" + x(d.purpose_code_frequency) + ",0)"; });
      
      bar.append("rect")
  			.attr("x", function(d) {//Retrieve the range for the x-axis domain
        	return x(d.coalesced_purpose_code);})
  			.attr("y", function(d) {//Retrieve the range for the y-axis domain
        	return y(d.purpose_code_frequency);})
  			.attr("height", function(d){return height - y(d.purpose_code_frequency);})
        .attr("width", x.bandwidth()*.8) //Returns width of each band
      	.attr("fill", function(d){return colorScale2(y(d.purpose_code_frequency));});
      
      chart.append("g")
      	.attr("class", "x axis")
      	.attr("transform", "translate(0,"+height+")")
      	.call(xAxis)
      	.selectAll("text")
      	.attr("y", 0)
      	.attr("x", 8)
      	.attr("dy", "0.35em")
      	.attr("transform", "rotate(90)") //Rotate tick labels
      	.style("text-anchor", "start");
      
      chart.append("g")
      	.attr("class", "y axis")
      	.call(yAxis);
      
      chart.append("text")
      	.attr("class", "label")
      	.attr("x", -28)
      	.attr("y", -4)
      	.style("fill", "black")
      	.text("Frequency");
      
      chart.append("text")
      	.attr("class", "label")
      	.attr("x", width/2)
    		.attr("y", height+(margin.bottom*.9))
      	.style("fill", "black")
      	.text("Purpose Code");
});
    
    
  </script>
</body>

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

https://d3js.org/d3-scale-chromatic.v1.min.js