D3 Examples - HW4 Bar Chart

Bar Chart Explanation

The marks used for the data: The bar chart encodes two attributes using line mark

The channels are vertical spatial position and the horizontal spatial position. The vertical spatial position is a quantitative attribute and it is mapped to the amount donated by each country.

The horizontal spatial position is a categorical attribute and it is mapped to the generous countries from the Aid data.

The bar chart shows the 9 most generous countries from the Government Aid Data. The vertical axis shows the total sum of donation made by each country all in USD and the horizontal axis shows the year the donation was made.

Interesting Insights

The bar chart shows Germany as the most generous country. This is because germany donated more than the other countries. This is kind of surprising to me because I thought United States gave more than the rest countires by observation.

From the chart, the total amount donated by Germany and United Statesis are more than the sum of what the remaining countries donated.

xxxxxxxxxx
 
<!DOCTYPE html>
​
<meta charset="utf-8">
​
<head>
    <title>A4</title>   
  <style> /* set the CSS */
​
  .bar { fill: steelblue; }
​
  </style>
</head>
​
<body>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 100},
    width = 800 - margin.left - margin.right,
    height = 400 - 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("countryDonate.csv", function(error, data) {
  if (error) throw error;
​
  // format the data
  data.forEach(function(d) {
    d.totAmt = +d.totAmt;
  });
​
  // Scale the range of the data in the domains
  x.domain(data.map(function(d) { return d.country; }));
  y.domain([0, d3.max(data, function(d) { return d.totAmt; })]);
​
  // 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.country); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.totAmt); })
      .attr("height", function(d) { return height - y(d.totAmt); });
​
  // add the x Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
​
  // add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
​
    //y-axis
  svg.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Total commitment amt USD constant ($)");
​
   //x-axis
  svg.append("g")
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(0)")
      .attr("y", height+15)
      .attr("x", width/2)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Country");
​
});
​
</script>
​
</body>
​
​
    