CatLeal · April 13, 2015 12:23
diff --git a/Data_InfantMortalityRate.csv b/Data_InfantMortalityRate.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Infant Mortality Rate | Week 4</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		<style type="text/css">

 			body {
 				background-color: white;
 				font-family: Helvetica, Arial, sans-serif;
 			}

 			h1 {
 				font-size: 24px;
 				color: #333;
 				margin: 20px 10px 0 10px;
 			}

 			p {
 				font-size: 14px;
 				line-height: 18px;
 				color: #333;
 				margin: 10px 0 0 10px;
 			}

 			svg {
 				background-color: white;
 			}

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

 			}

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

 		</style>

 	</head>
 	<body>

 		<h1>Infant Mortality Rate EU, 2012</h1>

 		<p>
 		A look at the infant mortality rate in the European Union 27 countries plus EFTA countries. The all dataset includes data since 1960 through 2012. I am displaying here only the 2012 data.
 	<br>
 	<br>
 	<font size="1"> 
 Source: <a href="http://www.pordata.pt/en/Europe/Search+Environment/Table/5687687" target="_blank">PORDATA</a>
 <br>
 Data Sources: Eurostat | UN | NSI - Rapid, Joint, Nowcast Data Collections 
 <br>
 Last updated: 2014-11-03
 <br>
 Rate % (formula): (Deaths of children under one year of age during the calendar year / Live births during the calendar year) * 1000
 		</font>
 		</p>

 		<script type="text/javascript">		

 			var w = 600;
 			var h = 500;
 			var padding = [ 10, 10, 30, 100 ];  //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.2);

 			var xAxis = d3.svg.axis()
 							.scale(widthScale)
 							.orient("bottom");

 			var yAxis = d3.svg.axis()
 							.scale(heightScale)
 							.orient("left");

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

 	
 			//Load in contents of CSV file
 			d3.csv("Data_InfantMortalityRate.csv", function(data) {

 				data.sort(function(a, b) {
 					return d3.ascending(+a["2012"], +b["2012"]);
 				});

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

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


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

 				rects.attr("x", padding[3])
 					.attr("y", function(d) {
 						return heightScale(d.Country);
 					})
 					.attr("width", function(d) {
 						return widthScale(d["2012"]);
 					})
 					.attr("height", heightScale.rangeBand)
 					.attr("fill", "#0099cc")
 					.append("title")
 					.text(function(d) {
 						return d.Country + "'s Infant Mortality Rate in 2012 was " + d["2012"];
 					});


 				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);
 				//Now CSV contents have been transformed into
 				//an array of JSON objects.

 				//Log 'data' to the console, for verification.
 				console.log(data);

 			});


 		</script>

 	</body>
 </html>
Country	1960	1961	1962	1963	1964	1965	1966	1967	1968	1969	1970	1971	1972	1973	1974	1975	1976	1977	1978	1979	1980	1981	1982	1983	1984	1985	1986	1987	1988	1989	1990	1991	1992	1993	1994	1995	1996	1997	1998	1999	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012
Austria	37.5	32.7	32.8	31.3	29.2	28.3	28.1	26.4	25.5	25.4	25.9	26.1	25.2	23.8	23.5	20.5	18.2	16.8	15	14.7	14.3	12.6	12.8	11.9	11.4	11.2	10.3	9.8	8.1	8.3	7.8	7.5	7.5	6.5	6.3	5.4	5.1	4.7	4.9	4.4	4.8	4.8	4.1	4.5	4.5	4.2	3.6	3.7	3.7	3.8	3.9	3.6	3.2
Belgium	31.4	28.1	27.5	27.2	25.3	23.7	24.7	22.9	21.7	21.2	21.1	20.4	18.8	17.7	17.4	16.1	15.3	13.6	13.3	12.3	12.1	11.5	11.1	10.6	10	9.8	9.6	9.7	9	8.5	8	8.3	8.2	8	7.6	6	5	5.4	5.2	4.9	4.8	4.6	4.5	4.1	3.9	3.7	4	3.9	3.8	3.5	3.6	3.4	3.8
Bulgaria	45.1	37.8	37.3	35.7	32.9	30.8	32.2	33.1	28.3	30.5	27.3	24.9	26.2	26.2	25.5	23.1	23.5	24	22.2	19.8	20.2	18.9	18.2	16.5	16.1	15.4	14.7	14.7	13.6	14.4	14.8	16.9	15.9	15.5	16.3	14.8	15.6	17.5	14.4	14.6	13.3	14.4	13.3	12.3	11.6	10.4	9.7	9.2	8.6	9	9.4	8.5	7.8
Croatia	70.4	62.9	59.4	56.4	53.5	49.5	41.7	41.5	41.1	37.6	34.2	29.5	27.6	26.2	25.2	23	22.4	21.5	20.9	19.2	20.6	18.9	18.3	18.7	16.8	16.6	15.7	14	13.1	11.7	10.7	11.1	11.6	9.9	10.2	8.9	8	8.2	8.2	7.7	7.4	7.7	7	6.3	6.1	5.7	5.2	5.6	4.5	5.3	4.4	4.7	3.6
Cyprus	42	40	38	36	34	32	30	29	28	27	26	24	21	18	20.9	18.2	15.7	15.6	15.6	13.2	14.4	14.4	14.3	14.3	14.4	14.4	14.4	13.2	13	12.9	12.9	12.2	11.1	8.7	8.6	8.5	8.5	8	7	6	5.6	4.9	4.7	4.1	3.5	4.6	3.1	3.7	3.5	3.3	3.2	3.1	3.5
Czech Republic	20	19.3	21.1	19.7	19.1	23.7	21.9	21.5	21.6	21.7	20.2	20.2	19.5	19.5	19.3	19.4	19.1	18.7	17.1	15.8	16.9	15.4	15	14.5	14.1	12.5	12.3	12	11	10	10.8	10.4	9.9	8.5	7.9	7.7	6	5.9	5.2	4.6	4.1	4	4.1	3.9	3.7	3.4	3.3	3.1	2.8	2.9	2.7	2.7	2.6
Denmark	21.5	21.8	20.1	19.1	18.7	18.7	16.9	15.8	16.4	14.8	14.2	13.5	12.2	11.5	10.7	10.4	10.2	8.7	8.8	8.8	8.4	7.9	8.2	7.7	7.7	7.9	8.2	8.3	7.6	8	7.5	7.3	6.6	5.4	5.5	5.1	5.6	5.2	4.7	4.2	5.3	4.9	4.4	4.4	4.4	4.4	3.5	4	4	3.1	3.4	3.5	3.4
Estonia	31.1	28	25.2	26	25.4	20.3	20	19.2	18	16.7	17.7	17.5	15.9	15.9	17.6	18.2	17.5	17.5	16.5	18.3	17.1	17	17.2	16.1	13.6	14.1	16	16	12.5	14.8	12.3	13.3	15.7	15.6	14.4	14.9	10.5	10	9.4	9.6	8.4	8.8	5.7	7	6.4	5.4	4.4	5	5	3.6	3.3	2.5	3.6
Finland	21	20.8	20.5	18.2	17	17.6	15	14.8	13.8	14.3	13.2	12.7	12	10.6	11	9.6	9.8	9	7.5	7.6	7.6	6.5	6	6.2	6.5	6.3	5.8	6.2	6	6.1	5.6	5.8	5.2	4.4	4.7	3.9	4	3.9	4.2	3.6	3.8	3.2	3	3.1	3.3	3	2.8	2.7	2.6	2.6	2.3	2.4	2.4
France	27.7	26	26.1	25.8	23.7	22.4	22.2	20.8	20.5	19.7	18.2	17.2	16.1	15.5	14.7	13.8	12.5	11.4	10.7	10	10	9.7	9.5	9.1	8.3	8.3	8	7.8	7.8	7.5	7.3	7.3	6.8	6.5	5.9	4.9	4.8	4.7	4.8	4.4	4.5	4.6	4.2	4.2	4	3.8	3.8	3.8	3.8	3.9	3.6	3.5	3.5
Germany	33.8	31.7	29.3	27	25.3	23.9	23.6	22.9	22.8	23.4	23.6	23.3	22.7	22.9	21.1	19.8	17.4	15.5	14.7	13.5	12.6	11.6	10.9	10.3	9.6	8.9	8.6	8.3	7.5	7.4	7	6.9	6.2	5.8	5.6	5.3	5	4.9	4.7	4.5	4.4	4.3	4.2	4.2	4.1	3.9	3.8	3.9	3.5	3.5	3.4	3.6	3.3
Greece	40.1	39.8	40.3	39.3	35.8	34.3	34	34.3	34.4	31.8	29.6	26.9	27.3	24.1	23.9	24	22.5	20.4	19.3	18.7	17.9	16.3	15.1	14.6	14.3	14.1	12.2	11.7	11	9.7	9.7	9	8.4	8.5	7.9	8.1	7.2	6.4	6.7	6.2	5.9	5.1	5.1	4	4.1	3.8	3.7	3.5	2.7	3.1	3.8	3.4	2.9
Hungary	47.6	44.1	47.9	42.9	40	38.8	38.4	37	35.8	35.7	35.9	35.1	33.2	33.8	34.3	32.8	29.8	26.2	24.4	24	23.2	20.8	20	19	20.4	20.4	19	17.3	15.8	15.7	14.8	15.6	14.1	12.5	11.5	10.7	10.9	9.9	9.7	8.4	9.2	8.1	7.2	7.3	6.6	6.2	5.7	5.9	5.6	5.1	5.3	4.9	4.9
Ireland	29.3	30.5	29.1	26.6	26.7	25.2	24.9	24.4	21	20.6	19.5	18	18	18	17.8	17.5	15.5	15.5	14.9	12.8	11.1	10.3	10.5	10.1	9.6	8.8	8.9	7.9	8.9	8.1	8.2	7.6	6.5	6.1	5.7	6.4	6	6.1	5.9	5.9	6.2	5.7	5	5.3	4.6	3.8	3.9	3.2	3.8	3.3	3.6	3.5	3.5
Italy	43.9	40.7	41.8	40.1	36.1	36	34.7	33.2	32.2	30.8	29.6	28.5	27	26.2	22.9	21.2	19.5	18.1	17.1	15.7	14.6	14.1	13	12.3	11.4	10.5	10.2	9.8	9.3	8.7	8.1	8	7.8	7	6.4	6.1	6	5.5	5.1	4.9	4.3	4.4	4.1	3.9	3.9	3.8	3.6	3.5	3.3	3.4	3.2	2.9	2.9
Latvia	27	24.1	24.2	25.9	22	18.9	17	17.3	18.9	17.7	17.7	15.9	16	15.8	18.4	20.3	20.1	18.3	18.1	18.3	15.3	16	13.9	15.9	12.9	13	12.8	11.3	11	11.3	13.7	15.7	17.6	16.2	15.7	18.8	15.9	15.3	15	11.3	10.3	11	9.8	9.4	9.3	7.7	7.4	8.5	6.6	7.6	5.6	6.6	6.3
Lithuania	38	35.4	36.3	35.1	29.9	24.7	23.3	20.5	19.9	20.7	19.3	14.8	17.4	18.1	19.4	19.6	18.2	17.2	18.2	16.8	14.5	16.5	15	13.9	13.4	14.2	11.6	12.3	11.6	10.7	10.2	14.4	16.3	15.7	14.2	12.5	10.1	10.3	9.3	8.7	8.6	8	8.1	6.9	8.1	7.1	7.2	6.3	5.5	5.6	5	4.8	3.9
Luxembourg	31.5	26.2	31.1	28.6	29.8	24	26.8	20.4	17	17.5	24.9	22.5	14	15.3	13.5	14.8	17.9	10.6	10.6	13	11.5	13.8	12.1	11.2	11.7	9	7.9	9.4	8.5	9.9	7.3	9.2	8.5	6	5.3	5.5	4.9	4.2	5	4.7	5.1	5.9	5.1	4.9	3.9	2.6	2.5	1.8	1.8	2.5	3.4	4.3	2.5
Malta	38.3	31.8	35	34.2	34.3	34.8	30.1	27.3	27.2	24.3	27.9	23.9	16.7	23.5	19.7	18.3	15.6	13.8	15.1	15.6	15.2	11	14.9	14.9	11.7	14.5	10.1	7.3	8	10.4	9.1	9.6	10.8	8.2	9.1	8.9	10.9	6.8	7.3	7.5	5.2	3.8	5.4	5.7	5.7	5.4	3.7	6.6	8.5	5.5	5.6	6.5	5.3
Netherlands	16.5	15.4	15.3	15.8	14.8	14.4	14.7	13.4	13.6	13.2	12.7	12.1	11.7	11.5	11.3	10.6	10.7	9.5	9.6	8.7	8.6	8.3	8.3	8.4	8.3	8	7.7	7.6	6.8	6.8	7.1	6.5	6.3	6.3	5.6	5.5	5.7	5	5.2	5.2	5.1	5.4	5	4.8	4.4	4.9	4.4	4.1	3.8	3.8	3.8	3.6	3.7
Poland	56.1	54.1	54.8	50.5	49.5	41.6	38.8	38	36.3	37.4	36.4	29.3	28.3	29.5	23.4	24.8	23.7	24.5	26.8	25.2	25.4	24.9	24.4	23.1	23	22.1	21.3	21.2	19.9	19.3	19.4	18.2	17.5	16.2	15.1	13.6	12.2	10.2	9.5	8.9	8.1	7.7	7.5	7	6.8	6.4	6	6	5.6	5.6	5	4.7	4.6
Portugal	77.5	88.8	78.6	73.1	69	64.9	64.7	59.2	61.1	55.8	55.5	51.9	41.4	44.8	37.9	38.9	33.4	30.3	29.1	26	24.3	21.8	19.8	19.2	16.7	17.8	15.8	14.2	13	12.1	10.9	10.8	9.2	8.6	7.9	7.4	6.8	6.4	6	5.6	5.5	5	5	4.1	3.8	3.5	3.3	3.4	3.3	3.6	2.5	3.1	3.4
Romania	75.7	71.4	60.3	55.2	48.6	44.1	46.6	46.6	59.5	54.9	49.4	42.4	40	38.1	35	34.7	31.4	31.2	30.3	31.6	29.3	28.6	28	23.9	23.4	25.6	23.2	28.9	25.4	26.9	26.9	22.7	23.3	23.3	23.9	21.2	22.3	22	20.5	18.6	18.6	18.4	17.3	16.7	16.8	15	13.9	12	11	10.1	9.8	9.4	9
Slovakia	28.6	27.8	25.5	26.2	25.6	28.5	27	25.3	23.2	25.5	25.7	24.4	25.4	24.9	22.8	23.7	24.5	21.5	21.8	20.9	20.9	19.2	17.9	17.5	17.2	16.3	15	14.2	13.3	13.5	12	13.2	12.6	10.6	11.2	11	10.2	8.7	8.8	8.3	8.6	6.2	7.6	7.9	6.8	7.2	6.6	6.1	5.9	5.7	5.7	4.9	5.8
Slovenia	35.1	29.4	30	29.6	28.1	29.6	26	26.7	27.1	25.4	24.5	25.5	21	21.2	19	17.3	19.4	17.6	16.6	15.4	15.3	13.1	14	13.9	13.9	13	11.9	11.1	10	8.1	8.4	8.2	8.9	6.8	6.5	5.5	4.7	5.2	5.2	4.5	4.9	4.2	3.8	4	3.7	4.1	3.4	2.8	2.4	2.4	2.5	2.9	1.6
Spain	35.4	37.3	32.4	31.7	30.8	29.4	28	26.1	24.6	22.6	20.7	18.8	16.3	15.2	13.7	18.9	17.1	16	15.3	14.3	12.3	12.5	11.3	10.9	9.9	8.9	9.2	8.9	8	7.8	7.6	7.2	7.1	6.7	6	5.5	5.5	5	4.9	4.5	4.4	4	4.1	3.9	3.9	3.7	3.5	3.4	3.3	3.2	3.2	3.1	3.1
Sweden	16.6	15.8	15.4	15.4	14.2	13.3	12.6	12.9	13.1	11.7	11	11.1	10.8	9.9	9.6	8.6	8.3	8	7.8	7.5	6.9	6.9	6.8	7	6.4	6.8	5.9	6.1	5.8	5.8	6	6.2	5.3	4.8	4.4	4.1	4	3.6	3.5	3.4	3.4	3.7	3.3	3.1	3.1	2.4	2.8	2.5	2.5	2.5	2.5	2.1	2.6
United Kingdom	22.5	22.1	22.3	21.8	20.6	19.6	19.7	18.8	18.7	18.6	18.5	17.9	17.5	17.2	19.9	18.9	17.1	16.6	15.6	14.8	13.9	13	12.8	11.9	11.3	11.1	9.5	9.1	9	8.4	7.9	7.4	6.6	6.3	6.2	6.2	6.1	5.8	5.7	5.8	5.6	5.5	5.2	5.3	5	5.1	4.9	4.7	4.6	4.5	4.2	4.2	4.1
Iceland	13	19.5	17	17	17.5	15	13.6	13.4	14	11.6	13.2	12.9	11.3	9.6	11.7	12.5	7.7	9.5	11.3	5.4	7.7	6	7.1	6.2	6.1	5.7	5.3	7.3	6.2	5.5	5.9	5.5	4.8	4.8	3.4	6.1	3.7	5.5	2.6	2.4	3	2.7	2.2	2.4	2.8	2.3	1.4	2	2.5	1.8	2.2	0.9	1.1
Norway	16	15.6	15.3	14.5	14.6	14.6	12.2	12.8	11.9	12.3	11.3	11.3	10.5	10.4	9.2	9.5	8.8	8.2	7.7	7.6	8.1	7.5	8.1	7.9	8.3	8.5	7.8	8.4	8	7.8	6.9	6.2	5.8	5	5.2	4	4	4.1	4	3.9	3.8	3.9	3.5	3.3	3.2	3.1	3.2	3.1	2.7	3.1	2.8	2.4	2.5
Switzerland	21.1	21	21.2	20.5	19	17.8	17.1	17.5	16.1	15.4	15.1	14.3	13.3	13.2	12.5	10.7	10.7	9.8	8.6	8.5	9.1	7.6	7.7	7.6	7.1	6.9	6.8	6.8	6.8	7.3	6.8	6.2	6.4	5.6	5.1	5.1	4.7	4.8	4.8	4.6	4.9	5	4.5	4.3	4.2	4.2	4.4	3.9	4	4.3	3.8	3.8	3.6
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Infant Mortality Rate \| Week 4</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 24px;
	color: #333;
	margin: 20px 10px 0 10px;
	}

	p {
	font-size: 14px;
	line-height: 18px;
	color: #333;
	margin: 10px 0 0 10px;
	}

	svg {
	background-color: white;
	}

	rect:hover {
	fill: #166b8b;
	}

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

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

	}

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

	</style>

	</head>
	<body>

	<h1>Infant Mortality Rate EU, 2012</h1>

	<p>
	A look at the infant mortality rate in the European Union 27 countries plus EFTA countries. The all dataset includes data since 1960 through 2012. I am displaying here only the 2012 data.
	<br>
	<br>
	<font size="1">
	Source: <a href="http://www.pordata.pt/en/Europe/Search+Environment/Table/5687687" target="_blank">PORDATA</a>
	<br>
	Data Sources: Eurostat \| UN \| NSI - Rapid, Joint, Nowcast Data Collections
	<br>
	Last updated: 2014-11-03
	<br>
	Rate % (formula): (Deaths of children under one year of age during the calendar year / Live births during the calendar year) * 1000
	</font>
	</p>

	<script type="text/javascript">

	var w = 600;
	var h = 500;
	var padding = [ 10, 10, 30, 100 ]; //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.2);

	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");

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


	//Load in contents of CSV file
	d3.csv("Data_InfantMortalityRate.csv", function(data) {

	data.sort(function(a, b) {
	return d3.ascending(+a["2012"], +b["2012"]);
	});

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

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


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

	rects.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.Country);
	})
	.attr("width", function(d) {
	return widthScale(d["2012"]);
	})
	.attr("height", heightScale.rangeBand)
	.attr("fill", "#0099cc")
	.append("title")
	.text(function(d) {
	return d.Country + "'s Infant Mortality Rate in 2012 was " + d["2012"];
	});


	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);
	//Now CSV contents have been transformed into
	//an array of JSON objects.

	//Log 'data' to the console, for verification.
	console.log(data);

	});


	</script>

	</body>
	</html>