D3 Examples - HW4-Bar Chart

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/

xxxxxxxxxx
 
<!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>
​
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/1a2d0e33-e615-1a45-a865-5a1d08a6143c/main.js" charset="UTF-8"></script><script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
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>
    