CS 725/825 - Spring 2018 - Homework 4 - Line Chart
Q1. What are the marks/channels used and the data/attributes they map to?
The marks for the line chart are connected dots/points that show value and map to: a quantitative value (amount in dollars/y-axis) AND one ordered key attribute (year on the x-axis).
Q2. What does the chart show?
Total donations made (millions/dollars) by the United States each year, 2002 through 2010.
Q3. What are 1-2 interesting insights (i.e., things you learned from the chart)?
For the year 2010, the amount skyrockets to over 100 million. I believe this outlier is the result of an error/mistake in the data.
Q4/References:
Built with blockbuilder.org
xxxxxxxxxx<svg width="700" height="400"></svg><script src="https://d3js.org/d3.v4.min.js"></script><script>var svg = d3.select("svg"), margin = {top: 40, right: 20, bottom: 80, 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.totaldonations); });d3.tsv("data.tsv", function(d) { d.year = d.year; // Modified dralph to get Millions scale on Y d.totaldonations = +d.totaldonations/1000000; 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.totaldonations; })); g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) .select(".domain") .remove(); g.append("g") .call(d3.axisLeft(y)) //.append("text") //.attr("fill", "#000") //.attr("transform", "rotate(-90)") //.attr("y", 6) //.attr("dy", "0.71em") //.attr("text-anchor", "end") //.text("Total Donations (in millions $)"); // text label for the y axis g.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 ($) in Millions"); // text label for the x axis g.append("text") .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top + 20 ) + ")") .style("text-anchor", "middle") .text("Year"); g.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("d", line); g.append("text") .attr("x", (width / 2)) .attr("y", 0 - (margin.top / 2)) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text("Total U.S. Donations by Year");});</script> https://d3js.org/d3.v4.min.js