Bar Chart for 1998-99

CS725 HW4 Bar Chart

Description: The chart is a bar chart. The mark is a rectangular bar, while the channel is length and the _color hue_. The attributes are qunatitative.

The chart shows the donations that happened in the years 1998 and 1999. There were not many donations before 2000. 1998 and 1999 happen to be the years with the most number of donations. Therefore, we find the countries and the amount that has been donated in the chart.

It is interesting to know that France, Germany, and Japan are the countries with the most number of donations.

Helpful Links: https://bost.ocks.org/mike/bar/

Openrefine to filer the data.

https://bl.ocks.org/d3noob

-<!DOCTYPE html>
<html>
<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> 
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-hsv.v0.1.min.js"></script>
<style>   
  body {font-family: garamond;} 
  .axis {font: 14px garamond;}
  .label {font: 16px garamond;}
</style>

<body>
  <h1>Countries that aided in the years 1998-99</h1>
	<p>All recipients and years included</p>
  <div><svg id="chart" width="800" height="450"></svg></div>

var svg = d3.select("#chart"), 
    margin = {top: 20, right: 50, bottom: 50, left: 90},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.35);
    
var y = d3.scaleLinear().rangeRound([height, 0]);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var colorScale = d3.scaleOrdinal(d3.schemeCategory20);

d3.tsv("onelasttime.tsv", function(d) {
   d.Donor = d.Donor;  
   d.TotalCommitmentaAmount = (+d.TotalCommitmentAmount);    
  return d;
}, function(error, data) {
  if (error) throw error;

x.domain(data.map(function(d) { return d.Donor; }));  
  
  y.domain([0, d3.max(data, function(d) { return d.TotalCommitmentAmount; })]); 
  
 
   g.append("g")
    .attr("class", "axis x-axis")
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x));
    
  
  g.append("g")
    .attr("class", "axis y-axis")
    .call(d3.axisLeft(y).ticks(20))
    
  
  g.append("text")
  	.attr("class", "label")
    .attr("x", 0-margin.left)      
    .attr("y", 0-margin.top/2)			
    .style("text-anchor", "start") 
  	.text ("Amount in USD")
  
  
  g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { console.log ("Country: " + d.Donor + ", x: " + x(d.Donor)); return x(d.Donor); })
     
      .attr("y", function(d) { console.log ("Amount: " + d.TotalCommitmentAmount + ", y: " + y(d.TotalCommitmentAmount)); return y(d.TotalCommitmentAmount); })
      .attr("width", x.bandwidth()) 
      .attr("height", function(d) { return height - y(d.TotalCommitmentAmount); })
  		.style("fill", function(d) {return colorScale(d.Donor); }) 
  ;
});
 </script>
</body>
</html>

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

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

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

https://d3js.org/d3-hsv.v0.1.min.js