etachov/ct_aid.csv

## ct_aid.csv

          
            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

## 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.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: 14px;
 				margin: 10px 0 0 85px;
 			}

 			a:link{
 				color: #4086AA;
 			}

 			svg{
 				background-color: #fff;
 			}

 			circle: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">

		//To do:
		//-redo the padding so there's actual var names

			var w = 750;
			var h = 425;
			var padding = [ 10, 10, 20, 85];

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

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

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

			var yAxis = d3.svg.axis()
				.scale(yScale)
				.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);
				});

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

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

			//narrow rects as lines

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

			rects_1
				.attr("x", padding[3])
				.attr("y", function(d) {
					return yScale(d.country);
				})
				.attr("width", 0)
				.attr("height", 1)
				.attr("fill", "#292E37");

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

			rects_2
				.attr("x",function(d) {
					return xScale(+d.disbursed);
				})
				.attr("y", padding[2])
				.attr("width", 1)
				.attr("height", 0)
				.attr("fill", "#292E37");


			// circle for end point
			var circles = svg.selectAll("circle")
				.data(data)
				.enter()
				.append("circle");

			circles
				.attr("cx", 85)
				.attr("cy", function(d) {
					return yScale(d.country);
				})
				.attr("r", 1)
				.attr("fill", "#292E37");

			//transitions

			var transTime = 4000

			rects_1
				.transition(transTime)
				.attr("width", function(d) {
					return xScale(+d.disbursed);
				});

			rects_2
				.transition(transTime)
				.attr("height", function(d) {
					return yScale(d.country);
				});

			circles
				.transition(transTime)
				.attr("cx", function(d) {
					return 85 + xScale(+d.disbursed);
				})
				.attr("cy", function(d) {
					return yScale(d.country);
				})
				.attr("r", 5)
				.attr("fill", "#292E37");
			//


			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.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: 14px;
	margin: 10px 0 0 85px;
	}

	a:link{
	color: #4086AA;
	}

	svg{
	background-color: #fff;
	}

	circle: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">

	//To do:
	//-redo the padding so there's actual var names

	var w = 750;
	var h = 425;
	var padding = [ 10, 10, 20, 85];

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

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

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

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.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);
	});

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

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

	//narrow rects as lines

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

	rects_1
	.attr("x", padding[3])
	.attr("y", function(d) {
	return yScale(d.country);
	})
	.attr("width", 0)
	.attr("height", 1)
	.attr("fill", "#292E37");

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

	rects_2
	.attr("x",function(d) {
	return xScale(+d.disbursed);
	})
	.attr("y", padding[2])
	.attr("width", 1)
	.attr("height", 0)
	.attr("fill", "#292E37");


	// circle for end point
	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	circles
	.attr("cx", 85)
	.attr("cy", function(d) {
	return yScale(d.country);
	})
	.attr("r", 1)
	.attr("fill", "#292E37");

	//transitions

	var transTime = 4000

	rects_1
	.transition(transTime)
	.attr("width", function(d) {
	return xScale(+d.disbursed);
	});

	rects_2
	.transition(transTime)
	.attr("height", function(d) {
	return yScale(d.country);
	});

	circles
	.transition(transTime)
	.attr("cx", function(d) {
	return 85 + xScale(+d.disbursed);
	})
	.attr("cy", function(d) {
	return yScale(d.country);
	})
	.attr("r", 5)
	.attr("fill", "#292E37");
	//


	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>