CS725 HW 4 BAR CHART

Jamie Gibbs

HW-4 Barchart

Bar Chart to Track Frequency of Foreign Aid Donations per Country

This bar chart was designed to show the number of times each country donated foreign aid between the years 2000 to 2010. I used OpenRefine to edit an excel spread sheet that contained the aid data. I then filtered out any countries that had less then 10 total donations and deleted all other information including dollar amounts, reasons for donation, aid ID, and the recipient of the aid until I had just the country names that donated and the total number of donations per country. I then converted it to a data.tsv file which is listed below.

Marks, Channels, Data Attributes and explanation of Bar Chart

The mark in this chart is a line. The chart has two channels which are mapped to two attributes. The vertical spatial channel is mapped to the Frequency of Donations attribute and the horizontal spatial channel is mapped to the Countries that Donated attribute. The Y-Axis or Frequncy of Donations attibute has 15 tics running from a range of 0 to 60. The X-Axis displays the Countries that Donated attribute and has 18 different countries labeled each with donations, from 10 for Australia, up to 58 for the United States. Each country's bar represents a different color of the rainbow.

Insights

Some of the countries with frequent donations really surprised me like Spain for example They have a lot of issues with their economy and high unemployment so I was surprised by the amount and frequency of their donations to other countries. I was further surprised by how infrequently the United Kingdom donated. I really thought they were more generous.

Links that helped in the making of this bar chart

https://github.com/d3/d3-scale-chromatic/blob/master/README.md#interpolateCool http://d3indepth.com/scales/ https://bost.ocks.org/mike/bar/

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>

<body>
	<h1.04>Bar Chart to Track Frequency of Foreign Aid Donations per Country</h1.04>
  <div><svg id="chart" width="965" height="545"></svg></div>

// See https://github.com/d3/d3-scale
var x1 = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y1 = d3.scaleLinear().rangeRound([height, 0]); // note that we've reversed the range
//color variable and scale set to 0,18 for domain for the 18 country attributes
var color = d3.scaleSequential().domain([0,18]).interpolator(d3.interpolateRainbow);

var g1 = svg1.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", function(d) {
  d.frequency = +d.frequency;    // convert text to number
  return d;
	}, function(error, data) {
  if (error) throw error;
	// creates new svg <g> space, sets new (0,0) at left, top margin
  // See https://www.dashingd3js.com/d3js-scales
  // maps domain of x values (country) to range of positions on x-axis
  x1.domain(data.map(function(d) { return d.country; }));  
  // maps domain of y values (frequencies 0, max freq) to range of positions on y-axis
  y1.domain([0, d3.max(data, function(d) { return d.frequency; })]);

// x-axis
  g1.append("g")
    .attr("class", "axis x-axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x1));

// y-axis
  g1.append("g")
    .attr("class", "axis y-axis")
    .call(d3.axisLeft(y1).ticks(15, "#")); // number of ticks and type
  // x-axis label
  g1.append("text")
  	.attr("class", "label")
   	.attr("x", width/2)
    .attr("y", height+(margin.bottom*0.30))
    .style("text-anchor", "middle")
    .text("Countries that Donated")
    .style('fill', "Cyan")
    
  // y-axis label
  g1.append("text")
  	.attr("class", "label")
    .attr("x", 0-margin.left)       // set x position of label
    .attr("y", 0-margin.top/2)			// set y position of label
    .style("text-anchor", "start")  // left-justify
  	.text ("Frequency of Donations")
    .style('fill', "cyan")
    
  // bars
  g1.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { console.log ("Country: " + d.country + ", x: " + x1(d.country)); return x1(d.country); })
      .attr("y", function(d) { console.log ("Frequency: " + d.frequency + ", y: " + y1(d.frequency)); return y1(d.frequency); })
      .attr("width", x1.bandwidth()-10) // width of each band 
      .attr("height", function(d) { return height - y1(d.frequency); })
		.style('fill', function(d,j) {return color(j);})//calling color variable
	});
</script>

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

https://d3js.org/d3-interpolate.v1.min.js