Line Chart - HW4

Hariharan Thiyagarajan

CS 725/825

Spring 2018

Homework 4 - Line Chart using Aid Data

Marks Used

The mark used in this chart is Line

Channel and Attribute

Length and position is the channel used in the Line chart.
They are mapped to the attribute Year and amount. Data type of both the attribute is Quantitative
The chart represents the least amount of donation given by the countries from 1991 to 2010.
Even though the chart represents the least amount, the amount given in 90's is much higher than the amount given after 2000. As a matter of fact, after 2000 the amount given is more or less similar till 2010.
Consolidation of data is done through open refine and excel.

Reference

(https://bl.ocks.org/mbostock/3883245)
(https://www.youtube.com/watch?v=EId9MrEVzW8)

<!DOCTYPE html>
<html>
  <body>
	<H2>Least amount donated from 1991 to 2010</H2>
	<h2>Line Chart using Aid data<h2>
<svg width="1042" height="394"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
  
<script>
  
var svg = d3.select("svg"),
    margin = {top: 0, right: 207, bottom: 59, left: 50},
    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 x = d3.scaleLinear()
    .rangeRound([0, width]);
var y = d3.scaleLinear()
    .rangeRound([height, 0]);
var line = d3.line()
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y(d.amount); });
d3.tsv("data.tsv", function(d) {
  d.year = d.year;
  d.amount = +d.amount;
  return d;
}, function(error, data) {
  if (error) throw error;
  x.domain(d3.extent(data, function(d) { return d.year; }));
  y.domain(d3.extent(data, function(d) { return d.amount; }));
  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .select(".domain")
  
     
  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("amount ($)")
      .style("fill", "steelblue")
;
    g.append("text")
  	.attr("class", "label")
    .attr("x", width/2)       // set x position of label
    .attr("y", height+(margin.bottom*0.75))			// set y position of label
    .style("text-anchor", "start")  // left-justify
  	.text ("year")
    .style("fill", "steelblue")
  
  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "teal")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 4.94)
      .attr("d", line);
  
  
});
</script>
 </html>

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