unamandita/c-section_births_internatl_2011.csv

## c-section_births_internatl_2011.csv

          
            country
            year
            percent
            footnotes

            
              Afghanistan
              2011
              3.6
              1

            
              Austria
              2011
              29

            
              Bahrain
              2011
              30

            
              Bangladesh
              2011
              17.1

            
              Belarus
              2011
              24

            
              Belize
              2011
              28.1

            
              Brazil
              2011
              53.7

            
              Bulgaria
              2011
              33.1

            
              Cameroon
              2011
              3.8

            
              Canada
              2011
              26.9

            
              Colombia
              2011
              42.8

            
              Czech Republic
              2011
              24.7

            
              Denmark
              2011
              21

            
              Estonia
              2011
              20.2

            
              Ethiopia
              2011
              1.5
              1

            
              Finland
              2011
              16.3

            
              Georgia
              2011
              35.1

            
              Germany
              2011
              32.1

            
              Ghana
              2011
              11.4

            
              Iceland
              2011
              16.6

            
              Iraq
              2011
              22.2

            
              Ireland
              2011
              28.1

            
              Japan
              2011
              19.2

            
              Kazakhstan
              2011
              15.9

            
              Kyrgyzstan
              2011
              7

            
              Latvia
              2011
              23.6

            
              Lithuania
              2011
              25

            
              Luxembourg
              2011
              31

            
              Macedonia
              2011
              24.9

            
              Maldives
              2011
              41.1

            
              Malta
              2011
              34

            
              Mauritius
              2011
              43.8
              11

            
              Morocco
              2011
              16

            
              Mozambique
              2011
              3.9

            
              Nepal
              2011
              4.6

            
              Nigeria
              2011
              4.7

            
              Norway
              2011
              17

            
              Oman
              2011
              17
              14

            
              Peru
              2011
              22.9

            
              Philippines
              2011
              11.1

            
              Poland
              2011
              35.2

            
              Portugal
              2011
              35.2

            
              Republic of Moldova
              2011
              14.8

            
              San Marino
              2011
              35.4

            
              Senegal
              2011
              5.9
              1

            
              Spain
              2011
              25

            
              Sweden
              2011
              17

            
              Switzerland
              2011
              33.3

            
              Turkmenistan
              2011
              5.9

            
              Uganda
              2011
              5.3

            
              United States of America
              2011
              32.8

            
              Uzbekistan
              2011
              9

            
              Viet Nam
              2011
              20

            
              Zimbabwe
              2011
              4.5
              1

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Bar Chart, Framed</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js">
		</script>
		<style type="text/css">

			body {
				margin: 0;
				background-color: white;
				font-family: "Helvetica";
			}

			#container {
				width: 960px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				padding: 30px;
				background-color: white;
				box-shadow: 2px 2px 4px 4px #ccc;
			}

			h1 {
				font-size: 18px;
				font-weight: lighter;
				margin: 0;
			}

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

			a:link {
				text-decoration: none;
				color: #0099CC;
			}

			a:hover {
				text-decoration: underline;
			}

			a:visited {
				color: #0099CC;
			}

			a:active {
				color: #0099CC;
			}

			svg {
				background-color: white;
			}

			g.bar text {
				font-size: 10px;
				fill: white;
				text-anchor: end;
				opacity: 0;
			}

			g.bar:hover rect {
				fill: #006699;
				cursor: pointer;
			}

			g.bar:hover text {
				opacity: 1;
			}

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

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

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

		</style>
	</head>
	<body>

		<div id="container">

			<h1>Percentage of Births Delivered by Cesarean Section in 2011, by Country</h1>

			<p>Source: <a href="http://data.un.org/Data.aspx?q=cesarean&d=WHO&f=MEASURE_CODE%3aWHS4_115" target="_blank">WHO Data</a></p>

		</div>

		<script type="text/javascript">


			var w = 960;
			var h = 760;
			var padding = [ 0, 5, 20, 125 ];  //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("c-section_births_internatl_2011.csv", function(data) {

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

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

				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", "#0099CC");

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

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

				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	year	percent	footnotes
Afghanistan	2011	3.6	1
Austria	2011	29
Bahrain	2011	30
Bangladesh	2011	17.1
Belarus	2011	24
Belize	2011	28.1
Brazil	2011	53.7
Bulgaria	2011	33.1
Cameroon	2011	3.8
Canada	2011	26.9
Colombia	2011	42.8
Czech Republic	2011	24.7
Denmark	2011	21
Estonia	2011	20.2
Ethiopia	2011	1.5	1
Finland	2011	16.3
Georgia	2011	35.1
Germany	2011	32.1
Ghana	2011	11.4
Iceland	2011	16.6
Iraq	2011	22.2
Ireland	2011	28.1
Japan	2011	19.2
Kazakhstan	2011	15.9
Kyrgyzstan	2011	7
Latvia	2011	23.6
Lithuania	2011	25
Luxembourg	2011	31
Macedonia	2011	24.9
Maldives	2011	41.1
Malta	2011	34
Mauritius	2011	43.8	11
Morocco	2011	16
Mozambique	2011	3.9
Nepal	2011	4.6
Nigeria	2011	4.7
Norway	2011	17
Oman	2011	17	14
Peru	2011	22.9
Philippines	2011	11.1
Poland	2011	35.2
Portugal	2011	35.2
Republic of Moldova	2011	14.8
San Marino	2011	35.4
Senegal	2011	5.9	1
Spain	2011	25
Sweden	2011	17
Switzerland	2011	33.3
Turkmenistan	2011	5.9
Uganda	2011	5.3
United States of America	2011	32.8
Uzbekistan	2011	9
Viet Nam	2011	20
Zimbabwe	2011	4.5	1
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Bar Chart, Framed</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js">
	</script>
	<style type="text/css">

	body {
	margin: 0;
	background-color: white;
	font-family: "Helvetica";
	}

	#container {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	padding: 30px;
	background-color: white;
	box-shadow: 2px 2px 4px 4px #ccc;
	}

	h1 {
	font-size: 18px;
	font-weight: lighter;
	margin: 0;
	}

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

	a:link {
	text-decoration: none;
	color: #0099CC;
	}

	a:hover {
	text-decoration: underline;
	}

	a:visited {
	color: #0099CC;
	}

	a:active {
	color: #0099CC;
	}

	svg {
	background-color: white;
	}

	g.bar text {
	font-size: 10px;
	fill: white;
	text-anchor: end;
	opacity: 0;
	}

	g.bar:hover rect {
	fill: #006699;
	cursor: pointer;
	}

	g.bar:hover text {
	opacity: 1;
	}

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

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

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

	</style>
	</head>
	<body>

	<div id="container">

	<h1>Percentage of Births Delivered by Cesarean Section in 2011, by Country</h1>

	<p>Source: <a href="http://data.un.org/Data.aspx?q=cesarean&d=WHO&f=MEASURE_CODE%3aWHS4_115" target="_blank">WHO Data</a></p>

	</div>

	<script type="text/javascript">


	var w = 960;
	var h = 760;
	var padding = [ 0, 5, 20, 125 ]; //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("c-section_births_internatl_2011.csv", function(data) {

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

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

	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", "#0099CC");

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

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

	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>