HW4 Line Chart

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

<!DOCTYPE html>

<body>

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>

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