S18 - HW 4 - Line Chart

Marks and Channels
Point marks and connection marks are used for the bar chart. Each point mark represents the amount of money that has been donated by all countries during that year. The connection marks are used to show the trend between two years.

There is a horizontal spatial position channel and a vertical spatial position channel. The horizontal spatial position channel is mapped to the year attribute. The year attribute is ordinal and it represents one of the years when one or more countries have donated. The vertical spatial position channel is mapped to the total_commitment_amount attribute. The total_commitment_amount attribute is quantitative and it represents the amount of money that has been donated by all countries.

Chart Explanation
This line chart shows the total amount of money that was donated by all countries per year. The years before 1994 was removed from the dataset.

Insights
During the year 1993, there was not any donations recorded in the sample data. This made it more difficult to use all the data from the original dataset.

The money donated during certain years was so high, that it made it hard to determine what the values are for most of the years between 1999-2005. The graph I created could not easily show the range, because the smallest is around 20,000 and the highest is around 150,000,000.

Refrences
AirData - was used to get data for the chart
https://bl.ocks.org/mbostock/3883245
https://github.com/d3/d3-time-format

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
        .grid line{
      stroke: lightgrey;
      stroke-opacity: 0.8;
    }
  </style>
</head>

<body>
  <script>
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);
    
    svg.append("text").attr("transform", "translate(0, 20)").text("Total Amount of Money Donated per Year");

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