pierandrea/FacebookGovRep.csv

## FacebookGovRep.csv

          
            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

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