CS 725/825 - Spring 2018 - Homework 4 - Bar Chart
Q1. What are the marks/channels used and the data/attributes they map to?
The mark for the bar chart is a line. The channel is length, which maps to the amount attribute (numerical/quantitative).
Position on the x axis which maps to the code/category attribute (label/categorical).
Q2. What does the chart show?
Shows the amounts donated to the various categories/codes for Sri Lanka.
Codes map to these descriptions:
Q3. What are 1-2 interesting insights (i.e., things you learned from the chart)?
I learned that most of the money is spent on the water bill, i.e., water supply, treatment and sanitation (like many of us do in Hampton Roads).
Q4/References:
Built with blockbuilder.org
xxxxxxxxxx<meta charset="utf-8"><style> /* set the CSS */.bar { fill: steelblue; }</style><body> <!-- load the d3.js library --> <script src="//d3js.org/d3.v4.min.js"></script><script>// set the dimensions and margins of the graphvar margin = {top: 50, right: 20, bottom: 200, left: 40}, width = 960 - margin.left - margin.right, height = 626 - margin.top - margin.bottom;// set the rangesvar x = d3.scaleBand() .range([0, width]) .padding(0.1);var y = d3.scaleLinear() .range([height, 0]); // append the svg object to the body of the page// append a 'group' element to 'svg'// moves the 'group' element to the top left marginvar 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 datad3.tsv("data.tsv", function(error, data) { if (error) throw error; // format the data data.forEach(function(d) { d.amount = +d.amount/1000000; }); // Scale the range of the data in the domains x.domain(data.map(function(d) { return d.code; })); y.domain([0, d3.max(data, function(d) { return d.amount; })]); // append the rectangles for the bar chart svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.code); }) .attr("width", x.bandwidth()) .attr("y", function(d) { return y(d.amount); }) .attr("height", function(d) { return height - y(d.amount); }); // add the x Axis svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) .selectAll("text") .style("text-anchor", "start") .attr("dx", "0.68em") .attr("dy", "0.157876224em") .attr("transform", "rotate(55)" ); // 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 ($) in Millions"); // text label for the x axis svg.append("text") .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top + 125 ) + ")") .style("text-anchor", "middle") .text("Category Code/Description"); svg.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("Donations to Sri Lanka by Category");});</script></body> https://d3js.org/d3.v4.min.js