pierandrea · August 29, 2015 14:19
diff --git a/FacebookGovRep.csv b/FacebookGovRep.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>#KnightD3 - Exercise Module 4: Adding scales and axes</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		<style type="text/css">
 			
 			body {
 				background-color: white;
 				font-family: Helvetica, Arial, sans-serif;
 			}

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

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

 			svg {
 				background-color: white;
 			}

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

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

 		</style>
 	</head>
 	<body>

 		<h1>Facebook Government Report</h1>

 		<p>Top 25 countries around the world for data requests to Facebook in 2013. Source: <a href="https://govtrequests.facebook.com/" target="_blank">Facebook</a>, 2013</p>

 		<script type="text/javascript">		


 			var w = 700;
 			var h = 600;
 			var padding = [ 20, 10, 30, 120 ];  //Top, right, bottom, left



 			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");

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



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



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

 				data.sort(function(a, b) {
 					return d3.descending(+a.year2013, +b.year2013);
 				});

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

 				heightScale.domain(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.year2013);
 					})
 					.attr("height", heightScale.rangeBand())
 					.attr("fill", "steelblue")
 					.append("title")
 					.text(function(d) {
 						return d.year2013 + " " + d.country + "'s Government requests to Facebook";
 					});

 				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] + ",0)")
 					.call(yAxis);

 			});


 		</script>

 	</body>
 </html>
country	year2013	year2014
United States	12598	14274
India	3598	5473
United Kingdom	1906	2366
Italy	1699	1774
Germany	1687	2132
France	1661	2094
Brazil	1165	1212
Australia	603	829
Spain	404	500
Argentina	278	482
Chile	230	288
Poland	220	305
Taiwan	193	204
Canada	174	279
Belgium	154	239
Portugal	148	305
Singapore	141	177
Israel	129	232
Turkey	129	165
Pakistan	126	100
Mexico	125	260
Greece	115	117
Sweden	89	213
Malta	81	93
New Zealand	80	139
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>#KnightD3 - Exercise Module 4: Adding scales and axes</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

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

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

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

	svg {
	background-color: white;
	}

	rect:hover {
	fill: orange;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

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

	</style>
	</head>
	<body>

	<h1>Facebook Government Report</h1>

	<p>Top 25 countries around the world for data requests to Facebook in 2013. Source: <a href="https://govtrequests.facebook.com/" target="_blank">Facebook</a>, 2013</p>

	<script type="text/javascript">


	var w = 700;
	var h = 600;
	var padding = [ 20, 10, 30, 120 ]; //Top, right, bottom, left



	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");

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



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



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

	data.sort(function(a, b) {
	return d3.descending(+a.year2013, +b.year2013);
	});

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

	heightScale.domain(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.year2013);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill", "steelblue")
	.append("title")
	.text(function(d) {
	return d.year2013 + " " + d.country + "'s Government requests to Facebook";
	});

	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] + ",0)")
	.call(yAxis);

	});


	</script>

	</body>
	</html>