cnev177 · April 18, 2015 19:20
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Loading CSV Data with D3</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		<style type="text/css">

 		body {
 	        background-color: #fff1e0;
 	        font-family: Arial, sans-serif;
      	}

      	h1{
      		margin: 0;
      		font-size: 1.3em;
      		color: #43423E;
      		margin-bottom: 5px;

      	

 		}

      	p{
      		font-size: 1em;
      		margin: 10px 0 0 0;
      		color: #777777;
      		line-height: 1.3em;
      		width: 660px;
      	}

 		circle{
 			fill: #8AB7C3;
 		}

 		circle:hover{
 			  stroke-width: 8px;
  			stroke: rgba(231, 114, 101, .3);
 			fill:rgb(231, 114, 101);

 		}

 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: #777777;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 				  fill: #777777;
 		
 			}


 		

 			a{
 				text-decoration: none;
 			}


 			#xAxis-title{
 			margin:0 auto;
 			padding: 10px;
 			text-align: center;
 			color: #777777;
 		


 			}

 			.yText{
 			fill:#777777;
 			font-size: 1em;

 			}

 			.source{
 				margin: 0;
 				font-size: 12px;
 				color: #777777;
 			}

 /*.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
 }*/
 			
 			/*.x.axis path,*/
 		
 		

 		</style>


 	</head>
 	<body>
 	

 	<h1>Which country spent the most per person on health in 2013?</h1>
 	<p>In the graph you see the countries in the world that spend the most per person on health. The spending is plotted against life expectancy. 
 	

 		<script type="text/javascript">	

 		var w = 750;
 		var h = 505;
 		var padding = [30, 10, 70, 70];

 		var xScale = d3.scale.linear()
 								.range([ padding[3], w - padding[1] - padding[3] ]);

 		var yScale = d3.scale.linear()
 						.range([ padding[0], h - padding[2] ]);


 		var body = d3.select("body")


 		// var tip = d3.tip()
 		// 		  .attr('class', 'd3-tip')
 		// 		  .offset([-10, 0])
 		// 		  .html(function(d) {
 		// 		    return "<strong>Frequency:</strong> <span style='color:red'>" + d.lifeExpectancy + "</span>";
  // 					})
 					
 						
 						


 						var yAxis = d3.svg.axis()
 									.scale(yScale)
 									.orient('left');

 						var xAxis = d3.svg.axis()
 							.scale(xScale)
 							.orient('bottom')
 							.ticks(13)
 							.tickFormat(function(d) {
 								return "$" + d ;
 							})


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

 						// svg.call(tip);




 			//Load in contents of CSV file
 			d3.csv("spending-on-health.csv", function(data) {

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

 	
 				});
 					xScale.domain([

 						d3.min(data, function(d){
 						return +d.healthExpenditure;
 						}), 
 						d3.max(data, function(d){
 						return +d.healthExpenditure;
 						}) 
 						]);

 					yScale.domain([
 						d3.max(data, function(d){
 						return +d.lifeExpectancy;
 					}),
 						d3.min(data, function(d){
 						return +d.lifeExpectancy;
 					})
 						
 						]);
 					//.attr('height', data.length * 20 )
 				
 				var circles = svg.selectAll("circle")
 					.data(data)
 					.enter()
 					.append("circle")
 					.attr('class','circle')
 					  // .on('mouseover', tip.show)
      	// 			.on('mouseout', tip.hide);


 				circles.attr("cx", function(d){
 					return xScale(d.healthExpenditure);

 				})
 					.attr("cy", function(d) {
 						return yScale(d.lifeExpectancy);
 					})
 					.attr("r", 0.1)
 					.append("title")
 					.html(function(d){
 						return d.CountryName +' has a life expectancy of ' + d.lifeExpectancy + " years and spent $" + d.healthExpenditure + ' on health (per person)'
 					});


 					
 				


 		
 					circles.sort(function(a,b) {
 						return d3.descending(+a.lifeExpectancy, +b.lifeExpectancy);

 					})
 					.transition()
 					.delay(function(d, i) {
 						return i *50;
 					})
 					.duration(5)
 					.attr("r", 4);

 				

 					svg.append('g')
 					.attr('class','x axis' )
 					.attr("transform", "translate(0," + (h - padding[2]) + ")")




 					.call(xAxis);





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

 						svg.append('text')
 							.text('Life expectancy (years)')
 							.attr('x',-10 )
 							.attr('y',30 )
 							.style("text-anchor", "end")
 							.attr("dx", "-10em")
 						     .attr("dy", ".0em")
 						     .attr("transform", function(d) {
 						         return "rotate(-90)" 
 						     })
 						     .attr('class','yText' )


 						     svg.append('text')
 							.text('Total health spending per person (international $)')
 							.attr('x',240 )
 							.attr('y',490 )
 							.style("text-anchor", "end")
 							.attr("dx", "20em")
 						     .attr("dy", ".0em")
 						     .attr("transform", function(d) {
 						         return "rotate(0)" 
 						     })
 						     .attr('class','yText' )



 			});


 		</script>

 	

 		<p class="source">Source: <a href="http://www.worldbank.org/">The World Bank</a></p>


 	</body>
 </html>





diff --git a/spending-on-health.csv b/spending-on-health.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Loading CSV Data with D3</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: #fff1e0;
	font-family: Arial, sans-serif;
	}

	h1{
	margin: 0;
	font-size: 1.3em;
	color: #43423E;
	margin-bottom: 5px;



	}

	p{
	font-size: 1em;
	margin: 10px 0 0 0;
	color: #777777;
	line-height: 1.3em;
	width: 660px;
	}

	circle{
	fill: #8AB7C3;
	}

	circle:hover{
	stroke-width: 8px;
	stroke: rgba(231, 114, 101, .3);
	fill:rgb(231, 114, 101);

	}

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

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

	}




	a{
	text-decoration: none;
	}


	#xAxis-title{
	margin:0 auto;
	padding: 10px;
	text-align: center;
	color: #777777;



	}

	.yText{
	fill:#777777;
	font-size: 1em;

	}

	.source{
	margin: 0;
	font-size: 12px;
	color: #777777;
	}

	/*.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	}*/

	/.x.axis path,/



	</style>


	</head>
	<body>


	<h1>Which country spent the most per person on health in 2013?</h1>
	<p>In the graph you see the countries in the world that spend the most per person on health. The spending is plotted against life expectancy.


	<script type="text/javascript">

	var w = 750;
	var h = 505;
	var padding = [30, 10, 70, 70];

	var xScale = d3.scale.linear()
	.range([ padding[3], w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);


	var body = d3.select("body")


	// var tip = d3.tip()
	// .attr('class', 'd3-tip')
	// .offset([-10, 0])
	// .html(function(d) {
	// return "<strong>Frequency:</strong> <span style='color:red'>" + d.lifeExpectancy + "</span>";
	// })





	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient('left');

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient('bottom')
	.ticks(13)
	.tickFormat(function(d) {
	return "$" + d ;
	})


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

	// svg.call(tip);




	//Load in contents of CSV file
	d3.csv("spending-on-health.csv", function(data) {

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


	});
	xScale.domain([

	d3.min(data, function(d){
	return +d.healthExpenditure;
	}),
	d3.max(data, function(d){
	return +d.healthExpenditure;
	})
	]);

	yScale.domain([
	d3.max(data, function(d){
	return +d.lifeExpectancy;
	}),
	d3.min(data, function(d){
	return +d.lifeExpectancy;
	})

	]);
	//.attr('height', data.length * 20 )

	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr('class','circle')
	// .on('mouseover', tip.show)
	// .on('mouseout', tip.hide);


	circles.attr("cx", function(d){
	return xScale(d.healthExpenditure);

	})
	.attr("cy", function(d) {
	return yScale(d.lifeExpectancy);
	})
	.attr("r", 0.1)
	.append("title")
	.html(function(d){
	return d.CountryName +' has a life expectancy of ' + d.lifeExpectancy + " years and spent $" + d.healthExpenditure + ' on health (per person)'
	});







	circles.sort(function(a,b) {
	return d3.descending(+a.lifeExpectancy, +b.lifeExpectancy);

	})
	.transition()
	.delay(function(d, i) {
	return i *50;
	})
	.duration(5)
	.attr("r", 4);



	svg.append('g')
	.attr('class','x axis' )
	.attr("transform", "translate(0," + (h - padding[2]) + ")")




	.call(xAxis);





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

	svg.append('text')
	.text('Life expectancy (years)')
	.attr('x',-10 )
	.attr('y',30 )
	.style("text-anchor", "end")
	.attr("dx", "-10em")
	.attr("dy", ".0em")
	.attr("transform", function(d) {
	return "rotate(-90)"
	})
	.attr('class','yText' )


	svg.append('text')
	.text('Total health spending per person (international $)')
	.attr('x',240 )
	.attr('y',490 )
	.style("text-anchor", "end")
	.attr("dx", "20em")
	.attr("dy", ".0em")
	.attr("transform", function(d) {
	return "rotate(0)"
	})
	.attr('class','yText' )



	});


	</script>



	<p class="source">Source: <a href="http://www.worldbank.org/">The World Bank</a></p>


	</body>
	</html>
CountryName	lifeExpectancy	healthExpenditure
Afghanistan	60.93141463	48.67393808
Angola	51.86617073	267.2242988
Albania	77.5372439	239.5770924
Arab World	70.08639216	315.6186354
United Arab Emirates	77.13129268	1568.963441
Argentina	76.18729268	1074.066944
Armenia	74.5407561	158.6215569
Antigua and Barbuda	75.82929268	665.260099
Australia	82.19756098	5827.071164
Austria	80.8902439	5427.260142
Azerbaijan	70.69314634	436.0227778
Burundi	54.09719512	21.46176493
Belgium	80.38536585	5092.601211
Benin	59.28756098	36.69098425
Burkina Faso	56.27502439	45.68480052
Bangladesh	70.69339024	31.63443186
Bulgaria	74.46585366	555.0197963
Bahrain	76.66987805	1067.202693
Bahamas, The	75.07256098	1620.67683
Bosnia and Herzegovina	76.27990244	448.7593504
Belarus	72.47073171	462.8784385
Belize	73.90487805	262.4178502
Bolivia	67.21736585	173.9238388
Brazil	73.88595122	1083.402758
Barbados	75.29641463	1007.215496
Brunei Darussalam	78.56643902	973.5598014
Bhutan	68.30231707	89.74884249
Botswana	47.40560976	397.3182644
Central African Republic	50.13680488	13.0493878
Canada	81.40112195	5717.973612
Switzerland	82.74878049	9276.472585
Chile	79.83680488	1203.839842
China	75.35302439	366.8630274
Cote d'Ivoire	50.75741463	86.75579136
Cameroon	55.04180488	67.17278529
Congo, Rep.	58.77	130.7115635
Colombia	73.97882927	533.0793299
Comoros	60.8574878	51.49240938
Cabo Verde	74.87068293	164.6873127
Costa Rica	79.921	1005.090239
Caribbean small states	71.96630595	553.1924824
Cuba	79.23926829	603.3826228
Cyprus	79.80431707	1866.268578
Czech Republic	78.27804878	1367.024736
Germany	81.04390244	5006.499458
Djibouti	61.78695122	137.3641429
Denmark	80.30243902	6269.540641
Dominican Republic	73.45095122	314.5126078
Algeria	71.00965854	313.5202115
Egypt, Arab Rep.	71.13292683	151.2641386
Eritrea	62.75463415	16.50864578
Spain	82.42682927	2581.028193
Estonia	76.42439024	1071.605128
Ethiopia	63.61734146	24.51864915
Finland	80.83170732	4449.131065
Fiji	69.923	188.879045
France	81.96829268	4863.55014
Micronesia, Fed. Sts.	68.96097561	407.429762
Gabon	63.441	441.3910658
UK	80.95609756	3597.917253
Georgia	74.0795122	349.9031357
Ghana	61.09863415	99.52846516
Guinea	56.09165854	24.75235174
Gambia, The	58.83134146	28.91017917
Guinea-Bissau	54.27170732	31.83837079
Equatorial Guinea	53.11456098	713.8579651
Greece	80.63414634	2146.240311
Grenada	72.74134146	499.241073
Guatemala	71.99282927	226.8483858
Guyana	66.20790244	250.0119285
Honduras	73.80304878	193.360306
Croatia	77.12682927	981.7638329
Haiti	63.05885366	76.66639644
Hungary	75.26829268	1055.761923
Indonesia	70.81743902	106.6333479
India	66.4562439	61.40821318
Ireland	81.04390244	4232.865883
Iran, Islamic Rep.	74.0687561	432.2817846
Iraq	69.47168293	305.3529361
Iceland	83.11707317	4125.877176
Israel	82.05609756	2600.511229
Italy	82.2902439	3154.900148
Jamaica	73.46892683	300.0680079
Jordan	73.90141463	335.7851655
Japan	83.33195122	3965.582074
Kazakhstan	70.45	580.0623034
Kenya	61.68397561	44.50922642
Kyrgyz Republic	70.20243902	86.90594123
Cambodia	71.74756098	75.75721305
Kiribati	68.84907317	166.3223791
Korea, Rep.	81.4597561	1880.044545
Kuwait	74.4627561	1507.213644
Lao PDR	68.24941463	32.40633912
Lebanon	80.12887805	631.4753876
Liberia	60.53187805	44.37104005
Libya	75.36168293	432.8442303
St. Lucia	74.79195122	621.2700329
Latin America & Caribbean	74.87483339	764.9764731
Sri Lanka	74.24029268	102.4953403
Lesotho	49.33146341	123.4244882
Lithuania	74.16341463	965.5638434
Luxembourg	81.79756098	7979.892508
Latvia	73.9804878	873.5569946
Morocco	70.87212195	189.2031878
Moldova	68.8115122	263.262983
Madagascar	64.69139024	19.63139425
Maldives	77.93536585	720.4603931
Mexico	77.35402439	664.3426076
Middle income	70.26156897	277.3494779
Macedonia, FYR	75.18802439	312.3879955
Mali	55.0135122	53.28703339
Malta	80.74634146	1993.606243
Myanmar	65.09968293	14.40354357
Montenegro	74.75836585	461.2600429
Mongolia	67.54819512	243.7591211
Mozambique	50.17336585	40.25548427
Mauritius	74.46	462.5430604
Malawi	55.23470732	26.21476794
Malaysia	75.01626829	423.4301212
North America	79.09789143	8802.789307
Namibia	64.34387805	422.5836885
Niger	58.44270732	27.2330651
Nigeria	52.49978049	114.9669057
Nicaragua	74.78817073	153.4132081
Netherlands	81.10487805	6144.868844
Norway	81.45121951	9714.785781
Nepal	68.40385366	39.0262313
New Zealand	81.40731707	4063.20516
Oman	76.85202439	677.6868425
Pakistan	66.58536585	36.87768441
Panama	77.57895122	796.076112
Peru	74.81460976	354.2768812
Philippines	68.7144878	121.5959221
Papua New Guinea	62.43073171	93.83476237
Poland	76.84878049	894.9166033
Korea, Dem. Rep.	69.80695122
Portugal	80.37317073	2036.773953
Paraguay	72.2734878	394.9596666
Pacific island small states	69.88693284	196.1511226
Qatar	78.60690244	2042.97202
Romania	74.46341463	503.8149356
Russian Federation	71.07317073	956.8452303
Rwanda	63.99397561	70.51125166
South Asia	66.89745148	55.99086456
Saudi Arabia	75.70336585	807.8386049
Sudan	62.0444878	114.952551
Senegal	63.35073171	45.55036602
Singapore	82.34634146	2507.433928
Solomon Islands	67.71690244	100.2731974
Sierra Leone	45.55095122	95.83287407
El Salvador	72.33892683	265.7710897
Serbia	75.13658537	474.7668918
South Sudan	55.24121951	18.07399793
Small states	63.48682922	326.6725426
Sao Tome and Principe	66.26097561	109.9755682
Suriname	71.03163415	444.7068083
Slovak Republic	76.26097561	1454.08433
Slovenia	80.27804878	2084.590974
Sweden	81.70487805	5680.33351
Swaziland	48.93792683	256.1141736
Seychelles	74.22682927	550.8454838
Syrian Arab Republic	74.71578049	42.74341733
Chad	51.15907317	37.20064104
Togo	56.4885122	54.44793633
Thailand	74.36507317	264.3462976
Tajikistan	67.37460976	69.97536535
Turkmenistan	65.46258537	157.5401463
Timor-Leste	67.52236585	58.89042923
Tonga	72.64231707	203.8741578
Trinidad and Tobago	69.92521951	964.5160388
Tunisia	73.64634146	308.5648468
Turkey	75.17595122	607.7082196
Tanzania	61.49314634	49.32111345
Uganda	59.19	59.11807384
Ukraine	71.1595122	312.6862556
Uruguay	77.05141463	1431.154046
US	78.84146341	9145.828151
Uzbekistan	68.22758537	119.957342
St. Vincent and the Grenadines	72.50097561	344.9656111
Venezuela, RB	74.64309756	496.6113127
Vietnam	75.7564878	111.1695022
Vanuatu	71.68682927	123.162338
Samoa	73.26487805	270.7399126
Yemen, Rep.	63.08958537	74.47018794
South Africa	56.73658537	593.4541967
Congo, Dem. Rep.	49.94385366	15.91195894
Zambia	58.09278049	92.81073153