D3 Examples - Countries that receive aid from Australia

Countries that receive aid from Australia

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

The bar chart encodes two attributes using a line mark with the vertical spatial position channel for the quantitative attribute, amount of money, and the horizontal spatial position channel for the categorical attribute, country.

The country data type is an item since each country is an individual entity that is discrete. The amount of money data type is an attribute, which is some specific property that can be measured, observed, and logged.

2. Write an explanation of what the chart shows

The bar chart shows the countries that get aid from Australia and how much they got for all purposes in all years available in the dataset.

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

I found that Cambodia gets highest amount of aid from Australia. Also, it is more than half of the total aid Australia gives, which means that Cambodia takes more than every other country combined.

4. Include links to any examples or helpful tutorials that you used:

https://bl.ocks.org/d3noob/bdf28027e0ce70bd132edc64f1dd7ea4

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
​
.bar { fill: steelblue; }
​
</style>
<body>
    
<!-- load the d3.js library -->     
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
​
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 60, left: 80},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
// set the ranges
var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
var y = d3.scaleLinear()
          .range([height, 0]);
          
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");
​
// get the data
d3.csv("aid.csv", function(error, data) {
  if (error) throw error;
​
  
​
  // format the data
  data.forEach(function(d) {
    d.Amount = +d.Amount;
  });
  
  // Scale the range of the data in the domains
  x.domain(data.map(function(d) { return d.Recipient; }));
  y.domain([0, d3.max(data, function(d) { return d.Amount; })]);
​
  // append the rectangles for the bar chart
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.Recipient); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.Amount); })
      .attr("height", function(d) { return height - y(d.Amount); });
​
  // add the x Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
  
      // text label for the x axis
  svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top + 20) + ")")
      .style("text-anchor", "middle")
      .text("Country");
​
  // add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
  
      // text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Amount");  
​
});
​
</script>
</body>
    