UdochukwuNweke/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
Line Chart Explanation

The mark is a line and the channels are vertical and horizontal spatial positions. The vertical position is a quantitative attribute and it is mapped to the total amount all countries donated over a period of time. The horizontal position is also a quantitative attribute and it is mapped to the year all donor countries made a donation. 

The line chart shows the total amount donated by all countries in a given year. The vertical axis shows the total amount donated by all countries and the horizontal axis shows the year the amount was donated 

From the line chart, I observed that from 1991 to 1994, there seems to be lowest point of donation with the exception of two spikes that happened in 1995 and 1998
From 2003 to 2006, there is an increase in donation

References
https://bl.ocks.org/mbostock/3883245 

https://github.com/d3/d3-time-format

  
## data.tsv

          
            date
            totalAmt

            
              1991
              141173.0

            
              1992
              505172.0

            
              1994
              1055046.52

            
              1995
              92062218.48

            
              1996
              20512.6

            
              1997
              243411.0

            
              1998
              54559239.6

            
              1999
              2912343.4

            
              2000
              9870772.600000001

            
              2001
              2541808.2099999995

            
              2002
              11115981.76

            
              2003
              1699686.709

            
              2004
              11030473.690000001

            
              2005
              16945975.596

            
              2006
              52704111.191999994

            
              2007
              59264074.05599999

            
              2008
              25963203.454709

            
              2009
              95352748.01800004

            
              2010
              146849403.279847

## index.html
<!DOCTYPE html>

<meta charset="utf-8">

<head>
	<title>A4</title>
</head>

<body>

<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>


var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 100},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%Y");

var x = d3.scaleTime()
    .rangeRound([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.totalAmt); });

d3.tsv("data.tsv", function(d) {
  d.date = parseTime(d.date);
  d.totalAmt = +d.totalAmt;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.totalAmt; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  //y-axis
  g.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 ($)");


  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);

  //x-axis
  g.append("g")
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(0)")
      .attr("y", height-20)
      .attr("x", width/2)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Year");

});

</script>

</body>
	date	totalAmt
	1991	141173.0
	1992	505172.0
	1994	1055046.52
	1995	92062218.48
	1996	20512.6
	1997	243411.0
	1998	54559239.6
	1999	2912343.4
	2000	9870772.600000001
	2001	2541808.2099999995
	2002	11115981.76
	2003	1699686.709
	2004	11030473.690000001
	2005	16945975.596
	2006	52704111.191999994
	2007	59264074.05599999
	2008	25963203.454709
	2009	95352748.01800004
	2010	146849403.279847
	<!DOCTYPE html>

	<meta charset="utf-8">

	<head>
	<title>A4</title>
	</head>

	<body>

	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>


	var svg = d3.select("svg"),
	margin = {top: 20, right: 20, bottom: 30, left: 100},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var parseTime = d3.timeParse("%Y");

	var x = d3.scaleTime()
	.rangeRound([0, width]);

	var y = d3.scaleLinear()
	.rangeRound([height, 0]);

	var line = d3.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.totalAmt); });

	d3.tsv("data.tsv", function(d) {
	d.date = parseTime(d.date);
	d.totalAmt = +d.totalAmt;
	return d;
	}, function(error, data) {
	if (error) throw error;

	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain(d3.extent(data, function(d) { return d.totalAmt; }));

	g.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x))
	.select(".domain")
	.remove();

	//y-axis
	g.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 ($)");



	g.append("path")
	.datum(data)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-linejoin", "round")
	.attr("stroke-linecap", "round")
	.attr("stroke-width", 1.5)
	.attr("d", line);

	//x-axis
	g.append("g")
	.append("text")
	.attr("fill", "#000")
	.attr("transform", "rotate(0)")
	.attr("y", height-20)
	.attr("x", width/2)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")
	.text("Year");

	});

	</script>

	</body>