cnev177 · November 3, 2015 15:16
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Module1</title>
 		<script type= "text/javascript"src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
 		<style type="text/css">
 			
 			body {
 				margin: 0;
 				background-color: #F2F2F2;
 ;font-family: Helvetica, Arial, sans-serif;
 color: #74736c;
 			}

 			#container {
 				width: 800px;
 				margin-left: auto;
 				margin-right: auto;
 				margin-top: 50px;
 				padding: 50px;
 				background-color: white;
 				border-radius: 4px;
 				box-shadow: 0px 0px 4px 4px rgba(227,227,230,1);
 			}

 			h1 {
 				font-size: 35px;
 				font-weight: 200;
 				color: #333;
 				margin: 0;
 			}

 			p {
 				font-size: 21px;
 				margin: 15px 0 20px 0;
 				line-height: 28px;
 				
 			}

 			a:link {
 				text-decoration: none;
 				color: #74736c;
 			}

 			a:hover {
 				text-decoration: underline;
 			}

 			a:visited {
 				color: gray;
 			}

 			a:active {
 				color: #74736c;
 			}

 			svg {
 				background-color: white;
 			}

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

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

 			g.bar:hover text {
 				opacity: 1;
 			}
 			
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: #74736c;
 				shape-rendering: crispEdges;
 			}

 			.axis path {
 				opacity:0;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 14px;
 				fill:#74736c;
 			}

 			.y.axis path{
 				opacity: 1;
 			}

 			
 			.y.axis line {
 				opacity: 0;
 				
 			}

 			.x.axis line {
  stroke: #a7a59b;
  stroke-dasharray: 2,2;
 }

 			.note{
 				font-size: 16px;
 				color:#74736c;
 				line-height: 21px;
 				margin-bottom: 5px;
 				margin-top: 10px;
 			}

 		</style>
 	</head>
 	<body>

 		<div id="container">

 			<h1>Mean age at 1st marriage of women in 2005</h1>

 			<p>The average age, in years, of first marriage for women.*</p>

 		</div>

 		<script type="text/javascript">		


 			var w = 800;
 			var h = 2820;
 			var padding = [ 30, 10, 5, 150 ];  //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.15);



 			var xAxis = d3.svg.axis()
 							.scale(widthScale)
 							.orient("top")
 							.ticks(6)
 							.tickPadding([padding[1]])
 							.tickSize(-h);


 			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("indicatorageofmarriage.csv", function(data) {

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

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

 				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", "#9CB4D6");

 				//Add a text element to each group
 				groups.append("text")
 					.attr("x", function(d) {
 						return padding[3] + widthScale(d.age2005) - 3;
 					})
 					.attr("y", function(d) {
 						return heightScale(d.country) + 10.5;
 					})
 					.text(function(d) {
 						return (Math.round(d.age2005 *10)/10).toFixed(1);
 					});

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



 				svg.append("g")
 					.attr("class", "x axis")
 					.attr("transform", "translate(" + padding[3] + "," + (padding[0] + 0 ) + ")")
 					.call(xAxis);

 				svg.append("g")
 					.attr("class", "y axis")
 					.attr("transform", "translate(" + padding[3] + ",0)")
 					.call(yAxis);

 			});
 				d3.select("#container").append("p").html('<p class="note">*Women who never married are excluded. Cohabitation is excluded. The data are based on multple sources and definitions might vary.<p class="note">Source:<a style="color:steelblue" href="http://www.gapminder.org/downloads/documentation/gd009"> Gapminder, Mattias Lindgren</a></p>');
 				
 		


 		</script>
 		
 		
 	</body>
 </html>
diff --git a/indicatorageofmarriage.csv b/indicatorageofmarriage.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Module1</title>
	<script type= "text/javascript"src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">

	body {
	margin: 0;
	background-color: #F2F2F2;
	;font-family: Helvetica, Arial, sans-serif;
	color: #74736c;
	}

	#container {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: white;
	border-radius: 4px;
	box-shadow: 0px 0px 4px 4px rgba(227,227,230,1);
	}

	h1 {
	font-size: 35px;
	font-weight: 200;
	color: #333;
	margin: 0;
	}

	p {
	font-size: 21px;
	margin: 15px 0 20px 0;
	line-height: 28px;

	}

	a:link {
	text-decoration: none;
	color: #74736c;
	}

	a:hover {
	text-decoration: underline;
	}

	a:visited {
	color: gray;
	}

	a:active {
	color: #74736c;
	}

	svg {
	background-color: white;
	}

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

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

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

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

	.axis path {
	opacity:0;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 14px;
	fill:#74736c;
	}

	.y.axis path{
	opacity: 1;
	}


	.y.axis line {
	opacity: 0;

	}

	.x.axis line {
	stroke: #a7a59b;
	stroke-dasharray: 2,2;
	}

	.note{
	font-size: 16px;
	color:#74736c;
	line-height: 21px;
	margin-bottom: 5px;
	margin-top: 10px;
	}

	</style>
	</head>
	<body>

	<div id="container">

	<h1>Mean age at 1st marriage of women in 2005</h1>

	<p>The average age, in years, of first marriage for women.*</p>

	</div>

	<script type="text/javascript">


	var w = 800;
	var h = 2820;
	var padding = [ 30, 10, 5, 150 ]; //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.15);



	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("top")
	.ticks(6)
	.tickPadding([padding[1]])
	.tickSize(-h);


	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("indicatorageofmarriage.csv", function(data) {

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

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

	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", "#9CB4D6");

	//Add a text element to each group
	groups.append("text")
	.attr("x", function(d) {
	return padding[3] + widthScale(d.age2005) - 3;
	})
	.attr("y", function(d) {
	return heightScale(d.country) + 10.5;
	})
	.text(function(d) {
	return (Math.round(d.age2005 *10)/10).toFixed(1);
	});

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



	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding[3] + "," + (padding[0] + 0 ) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxis);

	});
	d3.select("#container").append("p").html('<p class="note">*Women who never married are excluded. Cohabitation is excluded. The data are based on multple sources and definitions might vary.<p class="note">Source:<a style="color:steelblue" href="http://www.gapminder.org/downloads/documentation/gd009"> Gapminder, Mattias Lindgren</a></p>');




	</script>


	</body>
	</html>
	country	age2005
	Afghanistan	17.83968322
	Albania	23.32650948
	Algeria	29.6
	Argentina	23.26396179
	Armenia	22.98603439
	Australia	28.93125534
	Austria	28.93756866
	Azerbaijan	23.88630676
	Bahamas	27.19277191
	Bahrain	25.90460396
	Bangladesh	18.66999817
	Barbados	31.7680397
	Belarus	22.77720261
	Belgium	30.34197617
	Belize	26.17763329
	Benin	20.33333206
	Bhutan	20.08592987
	Bolivia	22.59545898
	Botswana	27.11158562
	Brazil	23.09729576
	Brunei	25.14610291
	Bulgaria	24.15979195
	Burkina Faso	19.3993969
	Burundi	22.46302795
	Cambodia	22.30000114
	Cameroon	20.1510601
	Canada	26.75705528
	Cape Verde	25.68690109
	Central African rep.	19.40876579
	Chad	18.34000015
	Chile	23.37175751
	China	23.31162262
	Colombia	23.00436401
	Comoros	23.61499977
	Costa Rica	23.39002419
	Cote d'Ivoire	22.00292991
	Croatia	26.23072433
	Cyprus	25.21969414
	Czech rep.	27.62324715
	Denmark	30.8473587
	Dominican rep.	21.47467804
	Ecuador	21.55466843
	Egypt	23.63006955
	El Salvador	22.28621101
	Eritrea	20.55499649
	Estonia	27.58296585
	Ethiopia	20.5055027
	Fiji	22.89528847
	Finland	30.53718948
	France	30.96426582
	French Guiana	31.69898033
	French Polynesia	29.86706924
	Gabon	22.10285187
	Gambia	19.64669609
	Georgia	22.46738815
	Germany	30.12885094
	Ghana	22.44979858
	Greece	26.94385338
	Guadeloupe	31.57427979
	Guam	24.36248398
	Guatemala	20.45073509
	Guinea	18.71999931
	Guyana	27.79589272
	Haiti	22.27551079
	Honduras	20.35041809
	Hong Kong, China	28.61780357
	Hungary	27.85076332
	Iceland	27.51238251
	India	19.93957901
	Indonesia	22.11224365
	Iran	22.14466476
	Iraq	24.8413105
	Ireland	30.71268082
	Israel	25.87360382
	Italy	29.16757965
	Jamaica	33.20291901
	Japan	28.57218933
	Jordan	25.86478233
	Kazakhstan	23.35925102
	Kenya	21.4477787
	Korea, Rep.	27.0689621
	Kuwait	25.06534195
	Kyrgyzstan	21.8441143
	Latvia	28.15731812
	Lesotho	21.30995369
	Liberia	20.16080284
	Libya	29.19110107
	Lithuania	26.13404846
	Luxembourg	27.83593941
	macao, China	26.3622303
	Macedonia, FYR	22.8783989
	Madagascar	19.84911537
	Malawi	18.94499969
	Malaysia	25.11786079
	Maldives	21.82092667
	Mali	18.48999977
	Martinique	33.26953506
	Mauritania	21.77551079
	Mauritius	22.55157471
	Mexico	22.73022842
	Moldova	20.8733387
	Mongolia	23.65853691
	Montenegro	25.93799019
	Morocco	26.44129944
	Mozambique	18.73860168
	Myanmar	24.54446983
	Namibia	27.52589226
	Nepal	18.97565842
	Netherlands	30.51453972
	Netherlands Antilles	30.22594261
	New Caledonia	30.37372017
	New Zealand	30.00538063
	Nicaragua	20.44891739
	Niger	17.60019875
	Nigeria	20.90817261
	Norway	31.6225338
	Oman	21.67170334
	Pakistan	22.12841225
	Panama	21.91863823
	Papua New Guinea	20.80160321
	Paraguay	22.6956501
	Peru	23.56531143
	Philippines	23.18324852
	Poland	25.29973412
	Portugal	23.93018661
	Puerto Rico	22.58510419
	Qatar	25.78560257
	Reunion	30.50815582
	Romania	25.30126953
	Russia	23.58974075
	Rwanda	22.57836342
	Saint Lucia	32.26
	Samoa	23.94953156
	Saudi Arabia	25.83797646
	Senegal	21.53653717
	Serbia	25.93799019
	Sierra Leone	19.75572205
	Singapore	26.5067749
	Slovak Republic	26.3646183
	Slovenia	30.29513741
	Solomon Islands	21.22816467
	South Africa	27.90380096
	Spain	29.30578423
	Sri Lanka	25.26371193
	Sudan	22.66632843
	Swaziland	25.95965004
	Sweden	32.40498352
	Switzerland	29.11519051
	Taiwan	27.8
	Tajikistan	20.9141407
	Tanzania	19.96926498
	Thailand	24.05609512
	Togo	21.34904671
	Tonga	25.50241661
	Trinidad and Tobago	26.78060722
	Tunisia	29.2
	Turkey	23.04790878
	Turkmenistan	23.36683464
	Uganda	20.2470417
	Ukraine	22.81653786
	United Arab Emirates	23.08673668
	United Kingdom	29.75162125
	United States	25.3
	Uruguay	23.30049324
	Uzbekistan	20.58316231
	Vanuatu	22.6080265
	Venezuela	22.74840355
	West Bank and Gaza	22.86449242
	VietNam	23.21391106
	Virgin Islands (U.S.)	29.9101162
	Yemen, Rep.	21.67
	Zambia	20.53106117
	Zimbabwe	21.03118896