HW4-Bar Chart

Varsha Ravi - 01067335

Bar Chart

Mark used - Lines(thick lines)
List of Channels - position and length
Attribute they map to - Countries of donors and Amount of donation
Data type - Quantitative , Categorical

Amount of donation v/s Donor country

This is a bar graph representing donor countries on x-axis and the amount of donation they made on y-axis.This graph helps us to understand which country donated how much in the entire data set. The bar graph is sorted in alphabetical order of the names of the countries so that it is easier for the viewer to spot any country name without issues.

Things understood from chart

United States has done the maximun donation
Germany has done second highest donation
Only United States and Germany has done significantly more donation compared to any other country
Thailand and Estonia has not done any donation or very less amout of donation.
Over all 25 countries have donated

References

https://bost.ocks.org/mike/bar/
https://bl.ocks.org/mbostock/3885304
http://rajapradhan.com/blogs/d3-js-v4-essentials/
http://d3indepth.com/datajoins/

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis--x path {
  display: none;
}

</style>
<body>
	<h2>Donor countries v/s Amout of donation</h2>
  <p>commitment amount in usd </p>
  <svg width="800" height="400"></svg>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 60, left: 80},
    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.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

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

d3.csv("Data.csv", function(d) {
  d.commitment_amount_usd_constant = +d.commitment_amount_usd_constant;
  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.commitment_amount_usd_constant; })]);

g.append("g")
      .attr("class", "axis axis--x")
 			 .call(d3.axisBottom(x))
      .attr("transform", "translate(0," + height + ")")
  		.selectAll("text")
      .attr("transform", "rotate(-75)")
      .attr("x", 6)
      .attr("dx", "-3.71em")
  		.attr("dy", "-0.71em");
  		
//      .style("text-anchor", "end")
  //    .text("recipient");

g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .style("text-anchor", "end")
      .text("commitment amount in usd");
  
  g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.donor); })
      .attr("y", function(d) { return y(d.commitment_amount_usd_constant); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.commitment_amount_usd_constant); });
});

</script>
  <p><center>Donor</p>
    
</body>
</html>

Updated missing url https://gc.kis.v2.scr.kaspersky-labs.com/1A2D0E33-E615-1A45-A865-5A1D08A6143C/main.js to https://gc.kis.v2.scr.kaspersky-labs.com/1a2d0e33-e615-1a45-a865-5a1d08a6143c/main.js

https://gc.kis.v2.scr.kaspersky-labs.com/1A2D0E33-E615-1A45-A865-5A1D08A6143C/main.js

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