Bar chart - HW4

Hariharan Thiyagarajan

CS 725/825

Spring 2018

Homework 4 - Bar Chart using Aid Data

Marks Used

The mark used in this chart is Line.

Channel and Attribute

Length and position is the channel used in the Bar chart
They are mapped to the attribute Country and amount. The data type of Country attribute is Categorical and amount is Quantitative
The bar chart represents the Top 10 european countries who donated the least and it is sorted in descending order.
If we look at the csv data Austria has donated 20 times and Netherlands have donated only 11 times but still Netherlands donated over 1400 million which is 7 times higher than Austria.
I consolidated the data using Open refine and excel.

Reference

(https://bost.ocks.org/mike/bar/)
(http://blockbuilder.org/weiglemc/eda81fbb0af9c2de3ca5fccd3943b0e2)

<!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>

<body>
	<H2>Top 10 european countries who donated the least all together</H2>
	<h2>Bar Chart using Aid data<h2>
  <div><svg id="chart1" width="800" height="400"></svg></div>

var x1 = d3.scaleBand().rangeRound([0, width]).padding(0.384),
    y1 = d3.scaleLinear().rangeRound([height, 0]);

// creates new svg <g> space, sets new (0,0) at left, top margin
var g1 = svg1.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", function(d) {
  d.amount = +d.amount; 
  // convert text to number
  return d;
}, function(error, data) {
  if (error) throw error;

// See https://www.dashingd3js.com/d3js-scales
  // maps domain of x values (donor) to range of positions on x-axis
  x1.domain(data.map(function(d) { return d.donor; }));  
  // maps domain of y values (amount 0, max amount in millions) to range of positions on y-axis
 
  y1.domain([0, d3.max(data, function(d) { return d.amount; })]);

// x-axis
  g1.append("g")
    .attr("class", "axis x-axis")
    .attr("transform", "translate(0," + height + ")") // move axis to bottom of chart
    .call(d3.axisBottom(x1));
  
  // y-axis
  g1.append("g")
    .attr("class", "axis y-axis")
    .call(d3.axisLeft(y1));

// 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 ("amount in million $")
      .style("fill", "steelblue")

g1.append("text")
  	.attr("class", "label")
    .attr("x", width/2.7)       // set x position of label
    .attr("y", height+(margin.bottom*0.90))			// set y position of label
    .style("text-anchor", "start")  // left-justify
  	.text ("Countries")
    .style("fill", "steelblue")
  
  // bars
  var color = d3.schemeCategory20;
  g1.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { console.log ("donor: " + d.donor + ", x: " + x1(d.donor)); return x1(d.donor); })
      .attr("y", function(d) { console.log ("amount: " + d.amount + ", y: " + y1(d.amount)); return y1(d.amount); })
      .attr("width", x1.bandwidth()) // width of each band 
      .attr("height", function(d) { return height - y1(d.amount); })
  		.style("fill", "teal")// color of the bars
  ;
});

</script>
</body>
</html>

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

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