danielatkin/index.csv

## index.csv

          
            country
            govExpend

            
              Australia
              11949.619

            
              Austria
              4934.9859

            
              Belgium
              1614.8023

            
              Chile
              1994.1776

            
              Czech Republic
              1723.154856

            
              Denmark
              6392.568

            
              Estonia
              228.7147

            
              Finland
              3878.8195

            
              France
              24500.584

            
              Germany
              10671.4052

            
              Hungary
              1096.044876

            
              Iceland
              172.401278

            
              Ireland
              2370.096

            
              Israel
              2054.5

            
              Italy
              12298.0776

            
              Japan
              28225.43858

            
              Korea
              8146.516176

            
              Mexico
              7246.69722

            
              Netherlands
              11247.9498

            
              New Zealand
              2974.7025

            
              Norway
              7004.53

            
              Poland
              4592.2275

            
              Portugal
              1933.4529

            
              Slovak Republic
              29.4309

            
              Slovenia
              535.7459

            
              Spain
              2293.4472

            
              Sweden
              8061.948

            
              Switzerland
              2836.2698

            
              United Kingdom
              29606.775

            
              United States
              95354.93

            
              Russia
              7199.43149

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>OECD Total Government Spend By Country</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
		<style type="text/css">

			body {
				background-color: #ecf0f1;
				text-align: center;
				font-family: helvetica, calibri, arial, sans-serif;
			}
			h1 {
				font-size: 45px;
				}
			h2 {
				font-size: 30px;
				}

			svg {
				background-color: none;
				text-align: center;
			}
			rect {
				fill: #2c3e50;
				border-color: #95a5a6;
				border-width: 2px;
				}

			rect:hover {
				fill: #1abc9c;
				}

			.vert {
				-ms-transform: rotate(-90deg); /* IE 9 */
				-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
				transform: rotate(-90deg);
			}


		</style>
	</head>
	<body>

		<script type="text/javascript">

			d3.select("body")
				.append("h1")
				.text("OECD Total Government Spend (USD) on Higher Education")
				.append("h2")
				.text("by Country");

			var h = 700;
			var w = 800;
			var barPadding = 2;

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

d3.csv("index.csv", function(data) {
			data.sort(function(a, b) {
					//return d3.descending(a.govExpend, b.govExpend);

					//If your numeric values aren't sorting properly,
					//try commenting out the line above, and instead using:
					//
					return d3.descending(+a.govExpend, +b.govExpend);
					//
					//Data coming in from the CSV is saved as strings (text),
					//so the + signs here force JavaScript to treat those
					//strings instead as numeric values, thereby fixing the
					//sort order (hopefully!).
				});


				var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");

				rects.attr("x", function (d, i) {
							return i * (w / data.length);
							})
					.attr("y", function (d) {
							return h - (d.govExpend / 200) - 100;
							})
					.attr("height", function (d) {
							return d.govExpend / 200;
						})
					.attr("width",w / data.length - barPadding)
					.append("title")
					.text(function(d) {
						return d.country + "'s total gov expend is " + d.govExpend;
					});

				svg.selectAll("text")
					.data(data)
					.enter()
					.append("text")
					.text(function(d) {
						return d.country;
						})
					.attr("text-anchor", "end")
					.attr("x", -610)
					.attr("class", "vert")
					.attr("y", function(d, i) {
						return i * (w / data.length) + 15;
						})
					.attr("font-family", "sans-serif")
					.attr("font-size", "11px")
					.attr("fill", "#c0392b")
					.attr("vertical-align", "middle")
					;


			});


		</script>

	</body>
</html>
	country	govExpend
	Australia	11949.619
	Austria	4934.9859
	Belgium	1614.8023
	Chile	1994.1776
	Czech Republic	1723.154856
	Denmark	6392.568
	Estonia	228.7147
	Finland	3878.8195
	France	24500.584
	Germany	10671.4052
	Hungary	1096.044876
	Iceland	172.401278
	Ireland	2370.096
	Israel	2054.5
	Italy	12298.0776
	Japan	28225.43858
	Korea	8146.516176
	Mexico	7246.69722
	Netherlands	11247.9498
	New Zealand	2974.7025
	Norway	7004.53
	Poland	4592.2275
	Portugal	1933.4529
	Slovak Republic	29.4309
	Slovenia	535.7459
	Spain	2293.4472
	Sweden	8061.948
	Switzerland	2836.2698
	United Kingdom	29606.775
	United States	95354.93
	Russia	7199.43149
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>OECD Total Government Spend By Country</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: #ecf0f1;
	text-align: center;
	font-family: helvetica, calibri, arial, sans-serif;
	}
	h1 {
	font-size: 45px;
	}
	h2 {
	font-size: 30px;
	}

	svg {
	background-color: none;
	text-align: center;
	}
	rect {
	fill: #2c3e50;
	border-color: #95a5a6;
	border-width: 2px;
	}

	rect:hover {
	fill: #1abc9c;
	}

	.vert {
	-ms-transform: rotate(-90deg); /* IE 9 */
	-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
	transform: rotate(-90deg);
	}


	</style>
	</head>
	<body>

	<script type="text/javascript">

	d3.select("body")
	.append("h1")
	.text("OECD Total Government Spend (USD) on Higher Education")
	.append("h2")
	.text("by Country");

	var h = 700;
	var w = 800;
	var barPadding = 2;

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

	d3.csv("index.csv", function(data) {
	data.sort(function(a, b) {
	//return d3.descending(a.govExpend, b.govExpend);

	//If your numeric values aren't sorting properly,
	//try commenting out the line above, and instead using:
	//
	return d3.descending(+a.govExpend, +b.govExpend);
	//
	//Data coming in from the CSV is saved as strings (text),
	//so the + signs here force JavaScript to treat those
	//strings instead as numeric values, thereby fixing the
	//sort order (hopefully!).
	});


	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", function (d, i) {
	return i * (w / data.length);
	})
	.attr("y", function (d) {
	return h - (d.govExpend / 200) - 100;
	})
	.attr("height", function (d) {
	return d.govExpend / 200;
	})
	.attr("width",w / data.length - barPadding)
	.append("title")
	.text(function(d) {
	return d.country + "'s total gov expend is " + d.govExpend;
	});

	svg.selectAll("text")
	.data(data)
	.enter()
	.append("text")
	.text(function(d) {
	return d.country;
	})
	.attr("text-anchor", "end")
	.attr("x", -610)
	.attr("class", "vert")
	.attr("y", function(d, i) {
	return i * (w / data.length) + 15;
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "#c0392b")
	.attr("vertical-align", "middle")
	;


	});


	</script>

	</body>
	</html>