Built with blockbuilder.org
Jamie Gibbs
HW-4 Barchart
Bar Chart to Track Frequency of Foreign Aid Donations per Country
This bar chart was designed to show the number of times each country donated foreign aid between the years 2000 to 2010. I used OpenRefine to edit an excel spread sheet that contained the aid data. I then filtered out any countries that had less then 10 total donations and deleted all other information including dollar amounts, reasons for donation, aid ID, and the recipient of the aid until I had just the country names that donated and the total number of donations per country. I then converted it to a data.tsv file which is listed below.
Marks, Channels, Data Attributes and explanation of Bar Chart
The mark in this chart is a line. The chart has two channels which are mapped to two attributes. The vertical spatial channel is mapped to the Frequency of Donations attribute and the horizontal spatial channel is mapped to the Countries that Donated attribute. The Y-Axis or Frequncy of Donations attibute has 15 tics running from a range of 0 to 60. The X-Axis displays the Countries that Donated attribute and has 18 different countries labeled each with donations, from 10 for Australia, up to 58 for the United States. Each country's bar represents a different color of the rainbow.
Insights
Some of the countries with frequent donations really surprised me like Spain for example They have a lot of issues with their economy and high unemployment so I was surprised by the amount and frequency of their donations to other countries. I was further surprised by how infrequently the United Kingdom donated. I really thought they were more generous.
Links that helped in the making of this bar chart
https://github.com/d3/d3-scale-chromatic/blob/master/README.md#interpolateCool http://d3indepth.com/scales/ https://bost.ocks.org/mike/bar/
xxxxxxxxxx<html><meta charset="utf-8"><script src="https://d3js.org/d3.v4.min.js"></script><script src="https://d3js.org/d3-interpolate.v1.min.js"></script><style> body {font-family: calibri;} .axis {font: 11.5px calibri;} .label {font: 15px calibri;}</style><body> <h1.04>Bar Chart to Track Frequency of Foreign Aid Donations per Country</h1.04> <div><svg id="chart" width="965" height="545"></svg></div><script>// chart 1var svg1 = d3.select("#chart"), margin = {top: 38, right: 19, bottom: 120, left: 40}, width = +svg1.attr("width") - margin.left - margin.right, height = +svg1.attr("height") - margin.top - margin.bottom;// See https://github.com/d3/d3-scalevar x1 = d3.scaleBand().rangeRound([0, width]).padding(0.1), y1 = d3.scaleLinear().rangeRound([height, 0]); // note that we've reversed the range//color variable and scale set to 0,18 for domain for the 18 country attributesvar color = d3.scaleSequential().domain([0,18]).interpolator(d3.interpolateRainbow); var g1 = svg1.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.tsv("data.tsv", function(d) { d.frequency = +d.frequency; // convert text to number return d; }, function(error, data) { if (error) throw error; // creates new svg <g> space, sets new (0,0) at left, top margin // See https://www.dashingd3js.com/d3js-scales // maps domain of x values (country) to range of positions on x-axis x1.domain(data.map(function(d) { return d.country; })); // maps domain of y values (frequencies 0, max freq) to range of positions on y-axis y1.domain([0, d3.max(data, function(d) { return d.frequency; })]); // x-axis g1.append("g") .attr("class", "axis x-axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x1)); // y-axis g1.append("g") .attr("class", "axis y-axis") .call(d3.axisLeft(y1).ticks(15, "#")); // number of ticks and type // x-axis label g1.append("text") .attr("class", "label") .attr("x", width/2) .attr("y", height+(margin.bottom*0.30)) .style("text-anchor", "middle") .text("Countries that Donated") .style('fill', "Cyan") // y-axis label g1.append("text") .attr("class", "label") .attr("x", 0-margin.left) // set x position of label .attr("y", 0-margin.top/2) // set y position of label .style("text-anchor", "start") // left-justify .text ("Frequency of Donations") .style('fill', "cyan") // bars g1.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { console.log ("Country: " + d.country + ", x: " + x1(d.country)); return x1(d.country); }) .attr("y", function(d) { console.log ("Frequency: " + d.frequency + ", y: " + y1(d.frequency)); return y1(d.frequency); }) .attr("width", x1.bandwidth()-10) // width of each band .attr("height", function(d) { return height - y1(d.frequency); }) .style('fill', function(d,j) {return color(j);})//calling color variable });</script> https://d3js.org/d3.v4.min.js
https://d3js.org/d3-interpolate.v1.min.js