Line chart-HW4

Line Chart

** Mark ** -- Line
** Channel ** -- Spacial X-Position and Y-Position
** Data ** -- Year, Amount in $
** Attributes mapped ** -- Horizontal x-position is mapped to year (categorical) and Vertical y-position is mapped to Amount in $ (Quantitative)

About the Chart

This Line chart shows the Trend of amount spent by all the donor countries from the year 1992 till 2010
The X-axis takes the year and y-axis takes the commitment amount in $
I have choosed line chart to represent this particular dataset because line charts are easy to visualize the trend.
To reduce the dataset, I have used Mysqlphp database and with the help of queries all the year and coresspoind amount spent by all the donor countries are got. This data is used to get this line graph and shows the trend changes over the years

Insight

When considering all the years, the trend is pretty good. It has a increasing curve.
2010 has the highest amount donated by the donor countries
The donantion dropped drastically in the year 1999-2005, it slowly started raising from the year 2006
Also there is a very high fluctuation in the trend from the year 1994-1995,1997-1998 and same holds good for the year 2008-2010

References

Line Chart - Mike Bostock’s Block for line chart code

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

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

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

var margin = {top: 20, right: 20, bottom: 50, left: 90},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  
var parseTime = d3.timeParse("%Y");
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });
 
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 + ")");

d3.csv("data.csv", function(error, data) {
  if (error) throw error;

data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.close = +d.close;
  });
  
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.close; })]);

svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);
  
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
  
  svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top + 20) + ")")
      .style("text-anchor", "middle")
      .text("Year");
  
  svg.append("g")
      .call(d3.axisLeft(y));
  
  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("Commitment amount in $");

});

</script>
</body>

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