UdochukwuNweke/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
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. 


References 


https://bl.ocks.org/d3noob/bdf28027e0ce70bd132edc64f1dd7ea4
https://bl.ocks.org/mbostock/3883245
https://bost.ocks.org/mike/bar/
https://github.com/d3/d3-time-format


## countryDonate.csv

          
            country
            totAmt

            
              Germany
              190080397.59199998

            
              USA
              167538652.872

            
              France
              43896799.189

            
              UK
              40547577.93

            
              Canada
              32131116.623

            
              Japan
              24962132.146699995

            
              Sweden
              19986181.733

            
              Spain
              15870268.785999998

            
              Netherlands
              14239174.81

## index.html
<!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>
	country	totAmt
	Germany	190080397.59199998
	USA	167538652.872
	France	43896799.189
	UK	40547577.93
	Canada	32131116.623
	Japan	24962132.146699995
	Sweden	19986181.733
	Spain	15870268.785999998
	Netherlands	14239174.81
	<!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>