ericd9799 · February 6, 2018 23:13
diff --git a/.block b/.block
 license: gpl-3.0
diff --git a/README.md b/README.md
diff --git a/BarChart_AidData.csv b/BarChart_AidData.csv
diff --git a/BarChart_AidData_Reduced.csv b/BarChart_AidData_Reduced.csv
diff --git a/BarChart_AidData_Reduced_2.csv b/BarChart_AidData_Reduced_2.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <!-- for color scales -->
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .chart text {
      fill: black;
      font: 10px sans-serif;
    }
    
    .axis {font: 14px calibri;}
  	.label {font: 10px calibri;}
  </style>
 </head>

 <body>
  <div>
    <svg class="chart" width="960" height="525"></svg>
  </div>
  <script>
    var colorScale2 = d3.scaleSequential(d3.interpolateOranges).domain([height, 0]);
    
    //Adding margins, outer size subtract margins = inner size available for graph
    var svg = d3.select(".chart"),
        margin = {top:20, right:30, bottom:50, left:40},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;
    
    //scaleBand are like ordinal scales except the output range is continuous and numeric.
    var x = d3.scaleBand()
    	.range([0, width], .1);
    
    //scaleLinear serve to encode quantitative data
    var y = d3.scaleLinear()
    	.rangeRound([height, 0]); //Moving x-axis to bottom
    
    var colorScale2 = d3.scaleSequential(d3.interpolateOranges).domain([height, 0]);
    
    var xAxis = d3.axisBottom(x);
    
    var yAxis = d3.axisLeft(y).ticks(10,"#");
    
    var chart = d3.select(".chart")
    .attr("width", width + margin.left + margin.right) //Set width back to original value
    .attr("height", height + margin.top + margin.bottom) //Set height back to original value
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Adds margin to the left and top?
    
    d3.csv("BarChart_AidData_Reduced_2.csv", function(d){
      //Convert purpose_code_frequency from text to integer
      d.purpose_code_frequency = +d.purpose_code_frequency; 
      return d;
    },function(error, data) {
      if (error) throw error;
      
      //Constructing domain for categorical data range on x-axis
      x.domain(data.map(function(d){return d.coalesced_purpose_code;}));
      
      //Constructing domain for quantitative data range on y-axis
      y.domain([0, d3.max(data, function(d) { return d.purpose_code_frequency; })]);
      
      var barWidth = width / data.length;
      
      var bar = chart.selectAll("g")
      	.data(data)
    		.enter()
  			.append("g")
      	.attr("transform", function(d) { //Moving x-axis to bottom
          return "translate(" + x(d.purpose_code_frequency) + ",0)"; });
      
      bar.append("rect")
  			.attr("x", function(d) {//Retrieve the range for the x-axis domain
        	return x(d.coalesced_purpose_code);})
  			.attr("y", function(d) {//Retrieve the range for the y-axis domain
        	return y(d.purpose_code_frequency);})
  			.attr("height", function(d){return height - y(d.purpose_code_frequency);})
        .attr("width", x.bandwidth()*.8) //Returns width of each band
      	.attr("fill", function(d){return colorScale2(y(d.purpose_code_frequency));});
      
      chart.append("g")
      	.attr("class", "x axis")
      	.attr("transform", "translate(0,"+height+")")
      	.call(xAxis)
      	.selectAll("text")
      	.attr("y", 0)
      	.attr("x", 8)
      	.attr("dy", "0.35em")
      	.attr("transform", "rotate(90)") //Rotate tick labels
      	.style("text-anchor", "start");
      
      chart.append("g")
      	.attr("class", "y axis")
      	.call(yAxis);
      
      chart.append("text")
      	.attr("class", "label")
      	.attr("x", -28)
      	.attr("y", -4)
      	.style("fill", "black")
      	.text("Frequency");
      
      chart.append("text")
      	.attr("class", "label")
      	.attr("x", width/2)
    		.attr("y", height+(margin.bottom*.9))
      	.style("fill", "black")
      	.text("Purpose Code");
 });
    
  </script>
 </body>
diff --git a/thumbnail.png b/thumbnail.png
coalesced_purpose_code	coalesced_purpose_name	purpose_code_frequency
11110	Education policy & admin. management	10
11120	Education facilities and training	9
11130	Teacher training	6
11220	Primary education	6
11230	Basic life skills for youth & adults	4
11240	Early childhood education	1
11320	Secondary education	3
11330	Vocational training	5
11420	Higher education	23
11430	Advanced tech. & managerial training	3
12100	Health, general, combinations of activities	1
12110	Health policy & admin. management	9
12181	Medical education/training	1
12182	Medical research	1
12191	Medical services	2
12220	Basic health care	7
12230	Basic health infrastructure	5
12240	Basic nutrition	1
12250	Infectious disease control	4
12263	Tuberculosis control	1
12281	Health personnel development	1
13010	Population policy and admin. mgmt	1
13020	Reproductive health care	3
13030	Family planning	1
13040	Std control including hiv/aids	5
14010	Water resources policy/admin. mgmt	4
14020	Water supply & sanit. - large systems	4
14030	Basic drinking water supply and basic sanitation	2
14032	Basic sanitation	1
14040	River development	1
14050	Waste management/disposal	1
14081	Educ./trng:water supply & sanitation	1
15105	Government and civil society, purpose unspecified or does not fit under any other applicable codes	1
15110	Public sector policy and adm. management	15
15112	Decentralisation and support to subnational govt.	1
15113	Anti-corruption organisations and institutions	2
15130	Legal and judicial development	7
15140	Government administration	3
15150	Democratic participation and civil society	16
15151	Elections	1
15153	Media and free flow of information	2
15160	Human rights	4
15170	Women's equality organisations and institutions	9
15210	Security system management and reform	4
15220	Civilian peace-building, conflict prevention and resolution	6
15230	Post-conflict peace-building (UN)	1
15250	Land mine clearance	3
16010	Social/welfare services	12
16020	Employment policy and admin. mgmt.	3
16050	Multisector aid for basic soc. serv.	3
16061	Culture and recreation	19
16062	Statistical capacity building	1
16064	Social mitigation of hiv/aids	3
21010	Transport policy & admin. management	1
21040	Water transport	2
21081	Educ./trng in transport & storage	1
22010	Communications policy & admin. mgmt	1
22030	Radio/television/print media	2
22040	Information and communication technology	4
23005	Energy generation and supply, purpose unspecified or does not fit under any other applicable codes	1
23030	Power generation/renewable sources	3
23040	Electrical transmission/distribution	2
23065	Hydro-electric power plants	1
23067	Solar energy	2
23068	Wind power	1
24010	Financial policy & admin. management	1
24030	Formal sector financ. intermediaries	1
24040	Informal/semi-formal fin. intermed.	6
25010	Business support services & institutions	8
31110	Agricultural policy & admin. mgmt	9
31120	Agricultural development	6
31140	Agricultural water resources	2
31150	Agricultural inputs	1
31161	Food crop production	1
31162	Industrial crops/export crops	1
31163	Livestock	1
31182	Agricultural research	2
31191	Agricultural services	1
31192	Plant/post-harvest prot. & pest ctrl	2
31193	Agricultural financial services	1
31194	Agricultural co-operatives	1
31210	Forestry policy and administrative management	5
31220	Forestry development	1
31282	Forestry research	1
31310	Fishing policy and admin. management	3
31320	Fishery development	1
31381	Fishery education/training	1
32110	Industrial policy & admin. mgmt	3
32163	Textiles - leather & substitutes	1
32171	Engineering	1
32182	Technological research & development	1
32210	Mineral/mining policy & admin. mgmt	2
33110	Trade policy and administrative management	5
33120	Trade facilitation	2
33181	Trade education/training	1
33210	Tourism policy and admin. management	2
41010	Environmental policy and admin. mgmt	6
41020	Biosphere protection	1
41030	Bio-diversity	3
41040	Site preservation	1
41081	Environmental education/training	2
41082	Environmental research	1
42010	Women in development	1
43010	Multisector aid	20
43030	Urban development and management	3
43040	Rural development	5
43081	Multisector education/training	5
43082	Research/scientific institutions	4
51010	General budget support	1
52010	Food aid/Food security programmes	9
60020	Debt forgiveness	2
72000	Emergency Response, combination of purposes	1
72010	Material relief assistance and services	17
72020	Emergency health services/support	1
72030	Water and sanitation services/support	1
72040	Emergency food aid	6
72050	Relief co-ordination; protection and support services	4
73010	Reconstruction relief and rehabilitation	3
74010	Disaster prevention and preparedness	3
91010	Administrative costs	17
92005	Support to non-governmental organizations and government organizations, purpose unspecified or does not fit under any other applicable codes	1
92010	Support to national ngos	8
92020	Support to international NGOs	1
92030	Support to local and regional ngos	3
93010	Refugees in donor countries	1
99810	Sectors not specified	18
99820	Promotion of development awareness	12
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <!-- for color scales -->
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

	.chart text {
	fill: black;
	font: 10px sans-serif;
	}

	.axis {font: 14px calibri;}
	.label {font: 10px calibri;}
	</style>
	</head>

	<body>
	<div>
	<svg class="chart" width="960" height="525"></svg>
	</div>
	<script>
	var colorScale2 = d3.scaleSequential(d3.interpolateOranges).domain([height, 0]);

	//Adding margins, outer size subtract margins = inner size available for graph
	var svg = d3.select(".chart"),
	margin = {top:20, right:30, bottom:50, left:40},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom;

	//scaleBand are like ordinal scales except the output range is continuous and numeric.
	var x = d3.scaleBand()
	.range([0, width], .1);

	//scaleLinear serve to encode quantitative data
	var y = d3.scaleLinear()
	.rangeRound([height, 0]); //Moving x-axis to bottom

	var colorScale2 = d3.scaleSequential(d3.interpolateOranges).domain([height, 0]);

	var xAxis = d3.axisBottom(x);

	var yAxis = d3.axisLeft(y).ticks(10,"#");

	var chart = d3.select(".chart")
	.attr("width", width + margin.left + margin.right) //Set width back to original value
	.attr("height", height + margin.top + margin.bottom) //Set height back to original value
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Adds margin to the left and top?

	d3.csv("BarChart_AidData_Reduced_2.csv", function(d){
	//Convert purpose_code_frequency from text to integer
	d.purpose_code_frequency = +d.purpose_code_frequency;
	return d;
	},function(error, data) {
	if (error) throw error;

	//Constructing domain for categorical data range on x-axis
	x.domain(data.map(function(d){return d.coalesced_purpose_code;}));

	//Constructing domain for quantitative data range on y-axis
	y.domain([0, d3.max(data, function(d) { return d.purpose_code_frequency; })]);

	var barWidth = width / data.length;

	var bar = chart.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("transform", function(d) { //Moving x-axis to bottom
	return "translate(" + x(d.purpose_code_frequency) + ",0)"; });

	bar.append("rect")
	.attr("x", function(d) {//Retrieve the range for the x-axis domain
	return x(d.coalesced_purpose_code);})
	.attr("y", function(d) {//Retrieve the range for the y-axis domain
	return y(d.purpose_code_frequency);})
	.attr("height", function(d){return height - y(d.purpose_code_frequency);})
	.attr("width", x.bandwidth()*.8) //Returns width of each band
	.attr("fill", function(d){return colorScale2(y(d.purpose_code_frequency));});

	chart.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0,"+height+")")
	.call(xAxis)
	.selectAll("text")
	.attr("y", 0)
	.attr("x", 8)
	.attr("dy", "0.35em")
	.attr("transform", "rotate(90)") //Rotate tick labels
	.style("text-anchor", "start");

	chart.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	chart.append("text")
	.attr("class", "label")
	.attr("x", -28)
	.attr("y", -4)
	.style("fill", "black")
	.text("Frequency");

	chart.append("text")
	.attr("class", "label")
	.attr("x", width/2)
	.attr("y", height+(margin.bottom*.9))
	.style("fill", "black")
	.text("Purpose Code");
	});

	</script>
	</body>