etachov · April 11, 2015 19:16
diff --git a/ct_aid.csv b/ct_aid.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset = "utf-8">
 		<title>US Counterterrorism Assistance</title>
 		<script type = "text/javascript" src = "http://d3js.org/d3.v3.min.js"></script>
 		<style type = "text/css">

 			body {
 				background-color: #fff;
 				font-family: sans-serif; Helvetica, Arial;
 			}

 			h1 {
 				font-size: 24px;
 				margin: 20px 0 0 85px ;
 			}

 			p {
 				font-size: 16px;
 				margin: 10px 0 0 85px;
 			}

 			a:link {
 				color: #4086AA;
 			}

 			svg {
 				background-color: #fff;
 			}

 			rect:hover {
 				fill: #4086AA;
 			}
 		
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			.axis text {
 				font-family: sans-serif;
 				font-size: 12px;
 			}

 			.y.axis path, 
 			.y.axis line {
 				opacity: 0;
 			}

 		</style>
 	</head>

 	<body>  

 		<h1>Top 20 Recipients of U.S. Counterterrorism Assistance </h1>

 		<p>Source: <a href="http://catalog.data.gov/dataset/foreign-assistance-dashboard/resource/e2affc25-ddba-4d93-8453-4c1f48b25ecc" target="_blank">data.gov</a>, 2013 </p>

 		<script type = "text/javascript">

 			var w = 750; 
 			var h = 425;
 			var padding = [ 10, 10, 20, 85 ];
 			//top [0] right [1] bottom [2] left [3]

 			
 			var widthScale = d3.scale.linear()
 				.range([ 0, w - padding[1] - padding[3] ]);

 			var heightScale = d3.scale.ordinal()
 				.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

 			var xAxis = d3.svg.axis()
 				.scale(widthScale)
 				.orient("bottom")
 				.ticks(6)
 				.outerTickSize(0);

 			var yAxis = d3.svg.axis()
 				.scale(heightScale)
 				.orient("left");

 			var svg = d3.select("body")
 				.append("svg")
 				.attr("width", w)
 				.attr("height", h);

 			d3.csv("ct_aid.csv", function(data) {
 				data.sort(function(a, b) {
 					return d3.descending(+a.disbursed, +b.disbursed);
 				});

 			widthScale.domain([ 0, d3.max(data, function(d) {
 				return +d.disbursed;
 			}) ]);

 			heightScale.domain(data.map(function(d) { return d.
 				country; }));

 			console.log(data);
 			console.log(data.map(function(d) { return d.country;

 			}));

 			var rects = svg.selectAll("rect")
 				.data(data)
 				.enter()
 				.append("rect");

 			rects.attr("x", padding[3])
 				.attr("y", function(d) {
 					return  heightScale(d.country);
 				})
 				.attr("width", function(d) {
 						return widthScale(+d.disbursed);
 				})
 				.attr("height", heightScale.rangeBand())
 				.attr("fill", "#292E37")
 				.append("title")
 				.text(function(d) {
 					return d.country + " received $" + d.disbursed + " in counterterrorism aid in 2013";
 				});

 			svg.append("g")
 				.attr("class", "x axis")
 				.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
 				.call(xAxis);

 			svg.append("g")
 				.attr("class", "y axis")
 				.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
 				.call(yAxis);

 			});
 		</script>
 	</body>
 </html>
country	objective	disbursed
Kenya	Counterterrorism	5297145.2
Mali	Counterterrorism	4920931.2
Egypt	Counterterrorism	2628123
Morocco	Counterterrorism	1500857
Pakistan	Counterterrorism	1493790
Colombia	Counterterrorism	1287168
Uganda	Counterterrorism	1094019
Yemen	Counterterrorism	1005153
Afghanistan	Counterterrorism	869230
Jordan	Counterterrorism	801724
Hungary	Counterterrorism	785354
Indonesia	Counterterrorism	772915
Lebanon	Counterterrorism	767163
Nigeria	Counterterrorism	759686
Turkey	Counterterrorism	692781
Philippines	Counterterrorism	681213.8
Mexico	Counterterrorism	613661
Bulgaria	Counterterrorism	544967
India	Counterterrorism	529612
Brazil	Counterterrorism	514855
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset = "utf-8">
	<title>US Counterterrorism Assistance</title>
	<script type = "text/javascript" src = "http://d3js.org/d3.v3.min.js"></script>
	<style type = "text/css">

	body {
	background-color: #fff;
	font-family: sans-serif; Helvetica, Arial;
	}

	h1 {
	font-size: 24px;
	margin: 20px 0 0 85px ;
	}

	p {
	font-size: 16px;
	margin: 10px 0 0 85px;
	}

	a:link {
	color: #4086AA;
	}

	svg {
	background-color: #fff;
	}

	rect:hover {
	fill: #4086AA;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 12px;
	}

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	</style>
	</head>

	<body>

	<h1>Top 20 Recipients of U.S. Counterterrorism Assistance </h1>

	<p>Source: <a href="http://catalog.data.gov/dataset/foreign-assistance-dashboard/resource/e2affc25-ddba-4d93-8453-4c1f48b25ecc" target="_blank">data.gov</a>, 2013 </p>

	<script type = "text/javascript">

	var w = 750;
	var h = 425;
	var padding = [ 10, 10, 20, 85 ];
	//top [0] right [1] bottom [2] left [3]


	var widthScale = d3.scale.linear()
	.range([ 0, w - padding[1] - padding[3] ]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom")
	.ticks(6)
	.outerTickSize(0);

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	d3.csv("ct_aid.csv", function(data) {
	data.sort(function(a, b) {
	return d3.descending(+a.disbursed, +b.disbursed);
	});

	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d.disbursed;
	}) ]);

	heightScale.domain(data.map(function(d) { return d.
	country; }));

	console.log(data);
	console.log(data.map(function(d) { return d.country;

	}));

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.country);
	})
	.attr("width", function(d) {
	return widthScale(+d.disbursed);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill", "#292E37")
	.append("title")
	.text(function(d) {
	return d.country + " received $" + d.disbursed + " in counterterrorism aid in 2013";
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
	.call(yAxis);

	});
	</script>
	</body>
	</html>