CS725 - S18 - HW4 - Bar Chart

**CS 725 - Spring 2018 - Homework 4 - Bar Chart **

List the marks/channels used and the data/attributes they map to.

Each line mark represents a purpose code.
The length channel represents the number of occurrences for the purpose code.
The saturation channel also represents the number of occurrences for the purpose code. The lighter saturation represents lower number of occurrences, while the darker saturation represents higher number of occurrences.
The horizontal spatial position maps to the purpose code which is a categorical attribute.
The vertical spatial position maps to the number of occurrences of the purpose code which is a quantitative attribute.

Write an explanation of what the chart shows.

The bar chart displays the number of occurrence for purpose codes that appeared more than twice in the aid data spreadsheet. The bar chart is used to answer the question, what is the frequency of the purpose codes used? To be able to answer the question, the length of each bar will be compared to see which bar has max height. If not comparing length of the bar, we can look for the bar with the darkest saturation. The dark saturation is another indicator for max frequency.

Point out 1 - 2 interesting insights (i.e., things you learned from the chart)

The purpose code associated with higher education, 11420, was donated to the most. This means there are many countries whom commited monetary aid views education as being important.
The purpose code 99810 with purpose name "Sectors not specified" was donated to 18 times. What type of donation would result in a purpose not describing it?

References

<!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 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("BarChart_AidData_Reduced_2.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