ssongalice/data.csv

## data.csv

          
            country
            value

            
              Australia
              62.7

            
              Austria
              97.5

            
              Belgium
              120.1

            
              Canada
              109.4

            
              Chile
              18.8

            
              Czech Republic
              57.8

            
              Denmark
              61.5

            
              Estonia
              12.9

            
              Finland
              63.4

            
              France
              110.4

            
              Germany
              86.4

            
              Greece
              167.0

            
              Hungary
              97.9

            
              Iceland
              120.2

            
              Ireland
              129.7

            
              Israel
              79.0

            
              Italy
              136.0

            
              Japan
              234.8

            
              Korea
              49.8

            
              Luxembourg
              30.6

            
              Netherlands
              77.4

            
              Norway
              34.5

            
              Poland
              60.7

            
              Portugal
              136.9

            
              Slovak Republic
              57.7

            
              Slovenia
              60.6

            
              Spain
              92.0

            
              Sweden
              53.4

            
              Switzerland
              45.7

            
              Turkey
              46.4

            
              United Kingdom
              111.0

            
              United States
              124.7

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Intermediate D3</title>
        <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<style type="text/css">

			body {
				margin: 0;
				background-color: #2A2C2B;
				font-family: Helvetica, Arial, sans-serif;
			}

			#container {
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
			}

			h1 {
				font-size: 24px;
			}

			p {
				font-size: 14px;
                color:#aaaaaa;
			}

			svg {
				background-color: white;
			}

			g.bar text {
				font-size: 11px;
				font-weight: bold;
				text-anchor: end;
				opacity: 0;
			}

			g.bar:hover rect {
				fill: #DC3522;
			}

			g.bar:hover text {
				opacity: 1;
                fill: #ffffff;
			}

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

			.axis text {
				font-family: sans-serif;
				font-size: 10px;
                fill:#777777;
			}

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

		</style>
	</head>
	<body>

		<div id="container">

			<h1>General government debt</h1>

			<p>Total, % of GDP(2012), Source : OECD</p>
			<p>Songyi Lim, www.attrs.co.kr</p>

		</div>

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


			//Now SVG goes into #container instead of body
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);


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

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

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

				heightScale.domain(data.map(function(d) { return d.country; } ));

				//Bind data to groups (not bars directly)
				var groups = svg.selectAll("g")
								.data(data)
								.enter()
								.append("g")
								.attr("class", "bar");

				//Add a rect to each group
				var rects = groups.append("rect")
					.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.country);
					})
					.attr("width", 0)
					.attr("height", heightScale.rangeBand())
					.attr("fill", "#D9CB9E");

				//Add a text element to each group
				groups.append("text")
					.attr("x", function(d) {
						return padding[3] + widthScale(d.value) - 3;
					})
					.attr("y", function(d) {
						return heightScale(d.country) + 11;
					})
					.text(function(d) {
						return d.value;
					});

				rects.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("width", function(d) {
						return widthScale(d.value);
					});

				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	value
	Australia	62.7
	Austria	97.5
	Belgium	120.1
	Canada	109.4
	Chile	18.8
	Czech Republic	57.8
	Denmark	61.5
	Estonia	12.9
	Finland	63.4
	France	110.4
	Germany	86.4
	Greece	167.0
	Hungary	97.9
	Iceland	120.2
	Ireland	129.7
	Israel	79.0
	Italy	136.0
	Japan	234.8
	Korea	49.8
	Luxembourg	30.6
	Netherlands	77.4
	Norway	34.5
	Poland	60.7
	Portugal	136.9
	Slovak Republic	57.7
	Slovenia	60.6
	Spain	92.0
	Sweden	53.4
	Switzerland	45.7
	Turkey	46.4
	United Kingdom	111.0
	United States	124.7
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Intermediate D3</title>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">

	body {
	margin: 0;
	background-color: #2A2C2B;
	font-family: Helvetica, Arial, sans-serif;
	}

	#container {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: white;
	}

	h1 {
	font-size: 24px;
	}

	p {
	font-size: 14px;
	color:#aaaaaa;
	}

	svg {
	background-color: white;
	}

	g.bar text {
	font-size: 11px;
	font-weight: bold;
	text-anchor: end;
	opacity: 0;
	}

	g.bar:hover rect {
	fill: #DC3522;
	}

	g.bar:hover text {
	opacity: 1;
	fill: #ffffff;
	}

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

	.axis text {
	font-family: sans-serif;
	font-size: 10px;
	fill:#777777;
	}

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

	</style>
	</head>
	<body>

	<div id="container">

	<h1>General government debt</h1>

	<p>Total, % of GDP(2012), Source : OECD</p>
	<p>Songyi Lim, www.attrs.co.kr</p>

	</div>

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


	//Now SVG goes into #container instead of body
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



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

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

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

	heightScale.domain(data.map(function(d) { return d.country; } ));

	//Bind data to groups (not bars directly)
	var groups = svg.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "bar");

	//Add a rect to each group
	var rects = groups.append("rect")
	.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.country);
	})
	.attr("width", 0)
	.attr("height", heightScale.rangeBand())
	.attr("fill", "#D9CB9E");

	//Add a text element to each group
	groups.append("text")
	.attr("x", function(d) {
	return padding[3] + widthScale(d.value) - 3;
	})
	.attr("y", function(d) {
	return heightScale(d.country) + 11;
	})
	.text(function(d) {
	return d.value;
	});

	rects.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(1000)
	.attr("width", function(d) {
	return widthScale(d.value);
	});

	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>