DimsumPanda · November 18, 2015 02:14
diff --git a/gdp.csv b/gdp.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!-- Minor change to Mike Bostock's example http://bl.ocks.org/mbostock/3887051 -->
 <meta charset="utf-8">
 <style>

 body {
  font: 12px sans-serif;
  padding: 50px;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 .bar {
  fill: steelblue;
 }

 .x.axis path {
  display: none;
 }

 </style>
 <body>

 <h2>Breakdown of GDP (in USD) in 2013 in Selected Sub-Saharan African Countries</h2>
  <p>WorldBank data. Helath expenditures (public and private) makes up a very small percentage of GDP.</p>

  <p>Industry refers to Industry, value added in GDP (in USD) from mining, manufacturing, construction, electricity, water, and gas.</p>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 <script>

 var margin = {top: 20, right: 20, bottom: 60, left: 40},
    width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

 var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .3);

 var x1 = d3.scale.ordinal(); // the actual bars inside each group

 var y = d3.scale.linear()
    .range([height, 0]);

 var color = d3.scale.category20();

 var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");

 var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

 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("gdp.csv", function(error, data) {

  if (error) {console.log(error);}

  console.log(data);

  var gdpcomponent = d3.keys(data[0]).filter(function(key) { return key !== "country"; });

  console.log(gdpcomponent);
  
  data.sort(function (a, b) {return b.health - a.health;}); // alphabetize

  data.forEach(function(d) {
    d.gdp = gdpcomponent.map(function(name) { return {name: name, value: +d[name]}; });
  });

  x0.domain(data.map(function(d) { return d.country; }));
  x1.domain(gdpcomponent).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(d.gdp, function(d) { return d.value; }); })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
        .attr("dy", ".5em")
        .attr("transform", "rotate(-30)")
        .style("text-anchor", "end");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("GDP (USD)");

  var state = svg.selectAll(".country")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x0(d.country) + ",0)"; });
      
  state.selectAll("rect")
      .data(function(d) { return d.gdp; })
    .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
      .data(gdpcomponent.slice())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

 });

 </script>
diff --git a/thumbnail.png b/thumbnail.png
country	health	military	agriculture	industry	other
Angola	4716918208	6090753194	12492068927	71768457098	29094977306
Burundi	217641361.8	60859466.19	1081116170	481389568.8	873499009.4
Benin	378787504.5	86003151.12	3033957326	1164099198	3644374278
Burkina Faso	776970502.4	163320783.7	2735466520	3366516879	5084048108
Botswana	813296539.8	298461703.3	378531741.5	5592224894	7896791935
Cameroon	1509798861	392840650.6	6766538984	8832000686	12066325474
Cabo Verde	80007150.05	9507426.794	155529136.7	305009655.1	1287856014
Ethiopia	2406019516	384546149.5	21398416446	5678928137	17656818710
Gabon	656309488.1	254027994.7	572771392.1	7699015690	8022958739
Ghana	2618934668	254990532.7	10901717151	13996624845	20812470790
Guinea	292532470.7	192533797	1261136505	2347400264	2138122448
Kenya	2459012791	860560896.1	16158866212	11025721950	24426652138
Lesotho	246483149.8	47940984.56	120203632	639369984.8	1093682584
Madagascar	449329815.7	74044567.06	2799184412	1713924075	5576991123
Mozambique	1049477156	157892114.4	4431050497	3269335797	6549441296
Mauritania	190749669.4	144215640	1034620092	2078157843	1610011694
Mauritius	575113525.3	23200896.38	384319641.6	2897855051	8047566284
Malawi	323692446	68597692.75	1289166315	667421084.1	1534643637
Namibia	1000626196	396311275.9	817001466.3	4312704475	6405562477
Rwanda	838131225.1	82480717.13	2511459306	1119640725	2970294224
Senegal	628562765	236737916	2592072269	3555032466	7779293593
Sierra Leone	583709949.9	30279061.34	2923798490	390873277.4	999612207.2
Zambia	1349338580	381400693.1	2586720240	9079359853	13423986912
	<!DOCTYPE html>
	<!-- Minor change to Mike Bostock's example http://bl.ocks.org/mbostock/3887051 -->
	<meta charset="utf-8">
	<style>

	body {
	font: 12px sans-serif;
	padding: 50px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.bar {
	fill: steelblue;
	}

	.x.axis path {
	display: none;
	}

	</style>
	<body>

	<h2>Breakdown of GDP (in USD) in 2013 in Selected Sub-Saharan African Countries</h2>
	<p>WorldBank data. Helath expenditures (public and private) makes up a very small percentage of GDP.</p>

	<p>Industry refers to Industry, value added in GDP (in USD) from mining, manufacturing, construction, electricity, water, and gas.</p>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script>

	var margin = {top: 20, right: 20, bottom: 60, left: 40},
	width = 1000 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x0 = d3.scale.ordinal()
	.rangeRoundBands([0, width], .3);

	var x1 = d3.scale.ordinal(); // the actual bars inside each group

	var y = d3.scale.linear()
	.range([height, 0]);

	var color = d3.scale.category20();

	var xAxis = d3.svg.axis()
	.scale(x0)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickFormat(d3.format(".2s"));

	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("gdp.csv", function(error, data) {

	if (error) {console.log(error);}

	console.log(data);

	var gdpcomponent = d3.keys(data[0]).filter(function(key) { return key !== "country"; });

	console.log(gdpcomponent);

	data.sort(function (a, b) {return b.health - a.health;}); // alphabetize

	data.forEach(function(d) {
	d.gdp = gdpcomponent.map(function(name) { return {name: name, value: +d[name]}; });
	});

	x0.domain(data.map(function(d) { return d.country; }));
	x1.domain(gdpcomponent).rangeRoundBands([0, x0.rangeBand()]);
	y.domain([0, d3.max(data, function(d) { return d3.max(d.gdp, function(d) { return d.value; }); })]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll("text")
	.attr("dy", ".5em")
	.attr("transform", "rotate(-30)")
	.style("text-anchor", "end");

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("GDP (USD)");

	var state = svg.selectAll(".country")
	.data(data)
	.enter().append("g")
	.attr("class", "g")
	.attr("transform", function(d) { return "translate(" + x0(d.country) + ",0)"; });

	state.selectAll("rect")
	.data(function(d) { return d.gdp; })
	.enter().append("rect")
	.attr("width", x1.rangeBand())
	.attr("x", function(d) { return x1(d.name); })
	.attr("y", function(d) { return y(d.value); })
	.attr("height", function(d) { return height - y(d.value); })
	.style("fill", function(d) { return color(d.name); });

	var legend = svg.selectAll(".legend")
	.data(gdpcomponent.slice())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text(function(d) { return d; });

	});

	</script>