Tachovsky Mod 4 Assignment

<!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset = "utf-8">
 		<title>US Counterterrorism Assistance</title>
 		<script type = "text/javascript" src = "https://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="https://catalog.data.gov/dataset/foreign-assistance-dashboard/resource/e2affc25-ddba-4d93-8453-4c1f48b25ecc" target="_blank">data.gov</a>, 2013 </p>

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>