Tachovsky Assignment 5

<!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: 23px;
 				margin: 20px 0 0 85px ;
 			}

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

a:link {
 				color: #4086AA;
 			}

svg {
 				background-color: #fff;
 			}

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

</style>
 	</head>

<body>

<h1>U.S. Counterterrorism Aid by Freedom House Score</h1>

<p>Sources: <a href="https://catalog.data.gov/dataset/foreign-assistance-dashboard/resource/e2affc25-ddba-4d93-8453-4c1f48b25ecc" target="_blank">data.gov</a> and <a href="https://freedomhouse.org/report-types/freedom-press" target="_blank">Freedom House</a> </br> (Higher Freedom House score means greater suppression of free speech)</p>

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

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

var yScale = d3.scale.linear()
				.range([ padding[0], h - padding[2] ]);

var rScale = d3.scale.linear()
				.range([2.5, 20]);

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

var yAxis = d3.svg.axis()
				.scale(yScale)
				.orient("left")
				.ticks(5)
				.outerTickSize(0);

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

d3.csv("ct_fh_aid.csv", function(data) {

xScale.domain([ 
				d3.min(data, function(d) {
					return +d.fh-.5;
				}),
				d3.max(data, function(d) {
					return +d.fh;
				}) 
			]);

yScale.domain([
				d3.max(data, function(d) {
					return +d.disbursed;
				}),
				d3.min(data, function(d) {
					return +d.disbursed-100000;
				})
			]);

rScale.domain([
				d3.min(data, function(d) {
					return +d.disbursed;
				}),
				d3.max(data, function(d) {
					return +d.disbursed;
				})
			]);
		
			var circles = svg.selectAll("circle")
				.data(data)
				.enter()
				.append("circle");

circles
				.attr("cx", function(d) {
					return xScale(+d.fh);
				})
				.attr("cy", function(d) {
					return yScale(+d.disbursed);
				})
				.attr("r", function(d) {
					return rScale(+d.disbursed);
				})
				.attr("fill", "#292E37")
				.attr("opacity", 0.7)
				.append("title")
				.text(function(d) {
					return d.country + " Freedom House: " + d.fh + ", and CT Aid Disbursed: " + d.disbursed;
			});

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

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

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