D3 Examples - CS725 - HW4

CS725 - HW4 - Line Chart

**CS 725 - Spring 2018 - Homework 4 - Line Chart **

List the marks/channels used and the data/attributes they map to.

The point mark represents the commitment amount for the particular year.

The line mark represents the temporal connection between each point.

The horizontal spatial position represents the year which is a categorical attribute.

The vertical spatial position represents the commitment amount which is a quantitative attribute.

Write an explanation of what the chart shows.

The line chart displays the aggregated commitment amount for each year the United States provided monetary aid to countries. The line chart will be used to answer the question, can we see the increase or decrease of a country's donation over time? To answer this question, I will need to look for a trend over the years.

Point out 1 - 2 interesting insights (i.e., things you learned from the chart)

After 2009, there was a significant increase in the times the United States provided monetary aid than prior years because there is a sky-rocketing increase in aggregated aid amount.

In 2003, the United States' aggregated aid commitment is the lowest compared to the other years.

References

xxxxxxxxxx
 
<!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>
  <div><svg id="lineChart" width="960" height="500"></svg></div>
  <script>
    var chart = d3.select("#lineChart"),
        margin = {top:20, right:20, bottom:30, 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+")");
    
    //Parse and return new format for year
    var parseTime = d3.timeParse("%Y");
    
    //Create time range
    var x = d3.scaleTime().range([0, width]);
    
    //Create integer range
    var y = d3.scaleLinear().rangeRound([height, 0]);
    
    //Generate line using the data
    var line = d3.line()
        .x(function(d) {return x(d.year);})
        .y(function(d) {return y(d.commitment_amount_usd_constant);});
    
    d3.csv("LineChart_AidData_Aggregate.csv", function(d){
      d.year = parseTime(d.year); //Convert year into new format
      d.commitment_amount_usd_constant = +d.commitment_amount_usd_constant; //Convert string to numeric
      return d;
    }, function(error, data){
      
      //Translate domain to range
      //d3.extent() returns the min and max value in array using natural order
      x.domain(d3.extent(data, function(d){return d.year;}));
      y.domain(d3.extent(data, function(d){return d.commitment_amount_usd_constant;}));
      
      g.append("g")
        .attr("transform", "translate(0,"+height+")")
        .call(d3.axisBottom(x)); //Creation of x-axis
      
      g.append("g")
        .call(d3.axisLeft(y)) //Creation of y-axis
        .append("text")
        .attr("fill", "black")
                .attr("transform", "rotate(-90)")
        .attr("y",4)
        .attr("dy", "0.75em")
        .style("text-anchor", "end")
        .text("Aggregate Commitment Amount USD ($)");
      
      g.append("text")
        .attr("fill", "black")
        .attr("x", width/2)
        .attr("y", height+margin.bottom)
        .style("text-anchor", "middle")
        .text("Year");
      
      g.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("strok-width", 1.5)
        .attr("d", line);
      
    });
    
  </script>
</body>
​
    