Australia's combined donation from 1998 to 2010

Built with blockbuilder.org

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

Marks:

Points connected by lines between them

The channels:

Horizontal spacial positions: Encodes categorical attribute, year.

Vertical spacial positions: Encodes quantitative attribute, amount of money.

The data type for money is an attribute. Each point represents an amount of money given in a certain year. a year is an item or entity.

2. Write an explanation of what the chart shows

The chart shows Australia's combined donations to other countries every year.

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

I found that the spike in donations in 2004 after being zero or close to it for 4 years is interesting. Did they save all the donation money for 4 years, then gave it all out at once in 2004?

Another thing I noticed is that the amount of donations drops after 2004, which means that my argument above could be true. They saved the money, then gave it all out, then were broke!

4. Include links to any examples or helpful tutorials that you used:

https://bl.ocks.org/d3noob/402dd382a51a4f6eea487f9a35566de0

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

</style>
<body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// set the dimensions and margins of the graph
var margin = {top: 50, right: 50, bottom: 100, left: 80},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// set the ranges
  var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
  
  var parseTime = d3.timeParse("%Y");

// define the line
var valueline = d3.line()
    .x(function(d) { return x(d.Year); })
    .y(function(d) { return y(d.Amount); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("australia.csv", function(error, data) {
  if (error) throw error;

// format the data
  data.forEach(function(d) {
      d.Year = parseTime(d.Year);
      d.Amount = +d.Amount;
  });

// Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.Year}));
  y.domain([0, d3.max(data, function(d) { return d.Amount; })]);

// Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);

// Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
  
    // text label for the x axis
  svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top) + ")")
      .style("text-anchor", "middle")
      .text("Year");

// Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
  
    // text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Amount");  
  
    // Add the scatterplot
  svg.selectAll("dot")
      .data(data)
    .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x(d.Year); })
      .attr("cy", function(d) { return y(d.Amount); })
  		.style("fill", "steelblue");

});

</script>
</body>

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