HW 4 Line chart

Jamie Gibbs

HW-4 Line Chart

Line Chart to Show United States Foreign Aid Spending Per Year

This line chart was designed to show the amount of money donated in foreign aid by the United States between the years 2002 through 2010. I used OpenRefine to edit an excel spread sheet that contained the aid data. I then filtered out all countries except for the United states and deleted all other columns such as reasons for donation, aid ID, and the recipient of the aid until I had just the United states and the dollars per year they spent. I then used a formula to combine all donations from a given year into a total for each year. I then converted it to a data.tsv file which is listed below.

Marks, Channels, Data Attributes and explanation of Line Chart

The mark in this chart is a point. The chart has two channels which are mapped to two attributes. The vertical spatial channel is mapped to the Money in ($) attribute and the horizontal spatial channel is mapped to the Year Spent attribute. The Y-Axis or Money in ($) attibute has tics running from a range of $0 to $120,000,000. The X-Axis displays the Year Spent attribute and has years ranging from 2002 through 2010. The points of each year are joined together to form a teal line that runs across the chart.

Insights

The chart displays a real spike in the amount of foreign aid from 2007 through 2010 especially in 2009 through 2010. This seems rather odd given the fact 2008 through 2010 was during the the housing crisis and you would think the government would reduce foreign aid during this time in order to help domestically. Also it shows the difference of foreign spending from one president to another.

Links that helped in the making of this LIne Chart

https://github.com/d3/d3-scale-chromatic/blob/master/README.md#interpolateCool http://d3indepth.com/scales/ https://bl.ocks.org/mbostock/3883245

No lines were hurt in the making of this chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <h>Line Chart to Show United States Foreign Aid Spending Per Year</h1>
  <div><svg id="lineChart" width="975" height="490"></svg></div>
  <script>
    
//Line Chart margins and dimensions
var chart = d3.select("#lineChart"),
        margin = {top:20, right:33, bottom:56, left:70},
        width = +chart.attr("width") - margin.left - margin.right,
        height = +chart.attr("height") - margin.top - margin.bottom,
        g = chart.append("g").attr("transform","translate("+margin.left+","+margin.top+")");

var parseTime = d3.timeParse("%Y");//create variable to parse time
    
    
// See https://github.com/d3/d3-scale
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

//create data line points along x and y axis
var line = d3.line()
    .x(function(d) { return x(d.Year); })
    .y(function(d) { return y(d.Money); });

d3.tsv("linechart.tsv", function(d) {
  d.Year = parseTime(d.Year);//parsetime to year
  d.Money = +d.Money;//convert text to number
  return d;
}, function(error, data) {
  if (error) throw error;

// See https://www.dashingd3js.com/d3js-scales
  // maps domain of x values (Year) to range of positions on x-axis  
  x.domain(d3.extent(data, function(d) { return d.Year; }));
  //maps domain of y values to range of positions on y-axis
  y.domain(d3.extent(data, function(d) { return d.Money; }));
  
  //create x axis
  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
  		.style("font-size", "14px")
  
  //create text for x axis description
   g.append("text")
      	.attr("fill", "black")
      	.attr("x", width/2)//set x position of label
      	.attr("y", height+-13+margin.bottom)//set y position of  label
      	.style("text-anchor", "middle")
        .style("font-size", "22px")
      	.text("Year Spent")
        .style('fill', "cyan");
  
  //create y axis
  g.append("g")
      .call(d3.axisLeft(y))
      .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")// position label parallel along the y axis
      .attr("y", 7)
      .attr("dy", "0.70em")
      .attr("text-anchor", "bottom")
      .style("font-size", "22px")
      .text("Money in ($)")
      .style('fill', "cyan");
  
  //create lines along the points
  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "cyan")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 2.1)
      .attr("d", line);
});

</script>

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