CT aid dot plot

<!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.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="https://catalog.data.gov/dataset/foreign-assistance-dashboard/resource/e2affc25-ddba-4d93-8453-4c1f48b25ecc" target="_blank">data.gov</a>, 2013 </p>

//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>