Line Chart

CS725 HW4 Line Chart

Description: The following is the description of the chart- The mark for the chart is a line. The channel is the length or position and the attribute is quantitative.

Basically, the graph shows the trend of USA's contribution ever since it started. It started to donate in the year 2002. USA is the country with the highest number of contributions. The chart shows the total amount (in USD) donated from the years 2002 to 2010.

If we notice the graph, we observe that there was a drop in the contribution for the year 2003. However, 2010 was the year with the highest amount of contribution.

Important Links

The link that helped me in making the chart - https://bl.ocks.org/mbostock/3883245

Openrefine was a tool that was used to filter the data.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>   
  body {font-family: garamond;} 
  .axis {font: 14px garamond;}
  .label {font: 16px garamond;}
</style>
<style>   
  body {font-family: garamond;} 
  .axis {font: 14px garamond;}
  .label {font: 16px garamond;}
</style>

<body>
  <h1>USA's contribution from 2002-2010</h1>
	<p>All recipients included</p>
  <div><svg id="chart" width="960" height="500"></svg></div>
<script>
  
var svg = d3.select("svg"),
    margin = {top: 60, right: 50, bottom: 50, left: 90},
    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 parseTime = d3.timeParse("%Y");

var x = d3.scaleTime()
    .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.AmountCommited); });

d3.tsv("data.tsv", function(d) {
  d.Year = parseTime(d.Year);
  d.AmountCommited = +d.AmountCommited;
  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.AmountCommited; }));
  
  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .select(".domain")

g.append("g")
      .call(d3.axisLeft(y))
      .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 8)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Amount in USD")
  
 g.append("text")
  	.call(d3.axisBottom(x))
    //.append("text")
    .attr("class", "label")
    .attr("fill", "#000")
    .attr("x", width/2)
    .attr("dx", "0.71em")
    .attr("y", height+margin.bottom*0.69)
    .attr("text-anchor", "end")
    .text ("Year")
       
   
   g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "grey")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
});

</script>
</body>
</html>

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