etachov · April 27, 2015 01:10
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Political Stability in Africa</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		<style type="text/css">

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

 			h1 {
 				font-size: 30px;
 				margin: 12px 0 0 75px;
 			}

 			p {
 				font-size: 20px;
 				margin: 10px 0 0 75px;
 			}

 			a:link{
 				color: steelblue;
 			}

 			svg {
 				background-color: white;
 			}

 			/*highlight style for the average line*/
 			g.highlight path {
 				stroke: steelblue;
 				stroke-width: 5;
 				stroke-opacity: 1;
 			}

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

 			.axis text {
 				font-family: Garamond, sans-serif;
 				font-size: 14px;
 			}



 		</style>
 	</head>

 	<body>

 			<h1>Political Stability Across Africa, 2002-2011</h1>

 			<p>Data Source: <a href= "data.worldbank.org" target="_blank">World Bank</a>. Higher scores indicates greater stability.</br> Mouseover to highlight individual countries.</p>

 			<script type="text/javascript">

 			var w = 800;
 			var h = 420;
 			var padding = [ 20, 50, 50, 70];
 						//Top, right, bottom, left

 			var dateFormat = d3.time.format("%Y");

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

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

 			var xAxis = d3.svg.axis()
 				.scale(xScale)
 				.orient("bottom")
 				.ticks(10)
 				.tickFormat(function(d) {
 					return dateFormat(d);
 				});

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


 			var line = d3.svg.line()
 				.x(function(d) {
 					return xScale(dateFormat.parse(d.year));
 				})
 				.y(function(d) {
 					return yScale(+d.score);
 				});


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


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

 			var years = ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"];

 			var dataset = [];

 			for (var i = 0; i < data.length; i++) {
 				dataset[i] = {
 					country: data[i].country,
 					stability: []
 				};

 				for (var j = 0; j < years.length; j++ ) {
 					if(data[i][years[j]]) {
 						dataset[i].stability.push({
 							year: years[j],
 							score: data[i][years[j]]

 						});
 					}
 				}
 			}

 			xScale.domain([
 				d3.min(years, function(d){
 					return dateFormat.parse(d);
 				}),
 				d3.max(years, function(d) {
 					return dateFormat.parse(d);
 				})

 			]);

 			yScale.domain([
 				d3.max(dataset, function(d) {
 					return d3.max(d.stability, function(d) {
 						return +d.score;
 					});
 				}),
 				d3.min(dataset, function(d) {
 					return d3.min(d.stability, function(d) {
 						return +d.score -.1;
 					});
 				})
 			]);


 			var groups = svg.selectAll("g")
 				.data(dataset)
 				.enter()
 				.append("g")
 				.classed("highlight", function(d) {

 						if (d.country == "Average") {
 							return true;
 						} else {
 							return false;
 						}

 					});

 			groups.append("title")
 				.text(function(d) {
 					return d.country;
 				});

 			groups.selectAll("path")
 				.data(function(d) {
 					return [ d.stability ];
 				})
 				.enter()
 				.append("path")
 				.attr("class", "line")
 				.attr("d", line)
 				.attr("stroke", "grey")
 				.attr("fill", "none")
 				.attr("stroke-width", 2)
 				.attr("stroke-opacity", .5)
 				.on("mouseover", function() {
 					d3.select(this)
 						.transition()
 						.duration(25)
 						.attr("stroke", "orange")
 						.attr("stroke-width", 5);
 				})
 				.on("mouseout", function(d) {
 					d3.select(this)
 						.transition()
 						.duration(200)
 						.attr("stroke", "grey")
 						.attr("stroke-width", 2)
 						.attr("stroke-opacity", .5);
 				});

 			// Axes
 			svg.append("g")
 				.attr("class", "y axis")
 				.attr("transform", "translate(0," + (h - padding[2]) +")")
 				.call(xAxis);

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

 			// Adding a single label in a hacky way
 			svg.append("text")
 				.attr("transform", "rotate(-90")
 				.attr("x", 728)
 				.attr("y", 157)
 				.style("text-anchor", "middle")
 				.style("fill", "steelblue")
 				.text("Africa Average");

 		});


 			</script>

 		</body>

 	</html>













diff --git a/polStaWide.csv b/polStaWide.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Political Stability in Africa</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

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

	h1 {
	font-size: 30px;
	margin: 12px 0 0 75px;
	}

	p {
	font-size: 20px;
	margin: 10px 0 0 75px;
	}

	a:link{
	color: steelblue;
	}

	svg {
	background-color: white;
	}

	/highlight style for the average line/
	g.highlight path {
	stroke: steelblue;
	stroke-width: 5;
	stroke-opacity: 1;
	}

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

	.axis text {
	font-family: Garamond, sans-serif;
	font-size: 14px;
	}



	</style>
	</head>

	<body>

	<h1>Political Stability Across Africa, 2002-2011</h1>

	<p>Data Source: <a href= "data.worldbank.org" target="_blank">World Bank</a>. Higher scores indicates greater stability.</br> Mouseover to highlight individual countries.</p>

	<script type="text/javascript">

	var w = 800;
	var h = 420;
	var padding = [ 20, 50, 50, 70];
	//Top, right, bottom, left

	var dateFormat = d3.time.format("%Y");

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

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

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(10)
	.tickFormat(function(d) {
	return dateFormat(d);
	});

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


	var line = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d) {
	return yScale(+d.score);
	});


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


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

	var years = ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"];

	var dataset = [];

	for (var i = 0; i < data.length; i++) {
	dataset[i] = {
	country: data[i].country,
	stability: []
	};

	for (var j = 0; j < years.length; j++ ) {
	if(data[i][years[j]]) {
	dataset[i].stability.push({
	year: years[j],
	score: data[i][years[j]]

	});
	}
	}
	}

	xScale.domain([
	d3.min(years, function(d){
	return dateFormat.parse(d);
	}),
	d3.max(years, function(d) {
	return dateFormat.parse(d);
	})

	]);

	yScale.domain([
	d3.max(dataset, function(d) {
	return d3.max(d.stability, function(d) {
	return +d.score;
	});
	}),
	d3.min(dataset, function(d) {
	return d3.min(d.stability, function(d) {
	return +d.score -.1;
	});
	})
	]);


	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g")
	.classed("highlight", function(d) {

	if (d.country == "Average") {
	return true;
	} else {
	return false;
	}

	});

	groups.append("title")
	.text(function(d) {
	return d.country;
	});

	groups.selectAll("path")
	.data(function(d) {
	return [ d.stability ];
	})
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", line)
	.attr("stroke", "grey")
	.attr("fill", "none")
	.attr("stroke-width", 2)
	.attr("stroke-opacity", .5)
	.on("mouseover", function() {
	d3.select(this)
	.transition()
	.duration(25)
	.attr("stroke", "orange")
	.attr("stroke-width", 5);
	})
	.on("mouseout", function(d) {
	d3.select(this)
	.transition()
	.duration(200)
	.attr("stroke", "grey")
	.attr("stroke-width", 2)
	.attr("stroke-opacity", .5);
	});

	// Axes
	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(0," + (h - padding[2]) +")")
	.call(xAxis);

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

	// Adding a single label in a hacky way
	svg.append("text")
	.attr("transform", "rotate(-90")
	.attr("x", 728)
	.attr("y", 157)
	.style("text-anchor", "middle")
	.style("fill", "steelblue")
	.text("Africa Average");

	});


	</script>

	</body>

	</html>
country	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011
Algeria	-1.692478149	-1.777850253	-1.365787925	-0.926654521	-1.099115015	-1.108025684	-1.075692257	-1.228086688	-1.282641714	-1.352369936
Angola	-1.62195294	-1.046225086	-1.041758078	-0.900983846	-0.542180601	-0.688272015	-0.345828961	-0.321307497	-0.177979129	-0.332175144
Benin	0.734553882	0.646225875	0.255016944	0.442953331	0.548808052	0.372545437	0.364136718	0.424431623	0.275696657	0.268000087
Botswana	0.788857256	1.069676791	0.879095567	1.049079782	0.886078508	0.918793122	0.937387974	0.945523516	0.956278177	1.038377581
Burkina Faso	-0.380702564	0.017159805	-0.114757093	-0.081807015	0.178195498	0.308396733	0.112004884	0.010156593	-0.136707928	-0.541545387
Burundi	-2.397711632	-2.308024422	-2.515943354	-1.507718042	-1.391205884	-1.316672406	-1.627807497	-1.262595287	-1.5911818	-1.811955913
Cameroon	-0.730206208	-0.491298828	-0.408388132	-0.18448824	-0.316070718	-0.383214654	-0.588461673	-0.365731452	-0.59813879	-0.613138605
Cape Verde	0.646825551	0.907998228	1.063515762	0.777720859	0.968151141	0.901188633	0.827802693	0.838659244	0.854414372	0.711531423
Central African Republic	-1.871341647	-1.580508111	-1.406548892	-1.422138721	-1.841246774	-1.837060952	-1.832776492	-2.052906487	-2.171087267	-2.036429245
Chad	-1.690269173	-1.409942288	-1.495756517	-1.395694395	-1.879639851	-1.930969642	-2.038543539	-1.629782073	-1.475336577	-1.291015105
Comoros	0.273448979	-0.678476899	-0.104552891	-0.358215706	-0.312325969	-1.064399209	-1.08405507	-0.737524265	-0.494567821	-0.456524334
Congo, Dem. Rep.	-2.09380887	-2.108315068	-2.385978584	-2.169047896	-2.278084053	-2.211638557	-2.030146553	-1.949254403	-2.184428093	-2.209821247
Congo, Rep.	-1.659232525	-1.169670207	-1.123951406	-1.15493423	-0.948589467	-0.766351933	-0.71099341	-0.191675315	-0.238694243	-0.240172298
Cote d'Ivoire	-1.981394769	-1.85021488	-2.168459078	-2.305741098	-1.992799301	-1.977223178	-1.900946201	-1.312576404	-1.57162527	-1.413808925
Djibouti	-0.439609292	-0.940249252	-0.313078279	-0.763060969	-0.225604907	-0.068939734	0.302566231	0.498516428	0.258689075	0.270144719
Egypt, Arab Rep.	-0.464554974	-0.673195365	-0.778613728	-0.649567447	-0.851828215	-0.576845148	-0.50064476	-0.632202601	-0.907535344	-1.286276821
Equatorial Guinea	-0.614204956	0.025147432	-0.133019515	-0.478333553	0.120994542	0.21326746	0.186769814	0.375119134	0.227078549	-0.091894427
Eritrea	-0.395745127	-0.751005998	-0.595594887	-0.780332701	-0.900704529	-1.028482721	-0.710932964	-0.671739377	-0.875969386	-0.789888279
Ethiopia	-1.278531675	-1.43330208	-1.261059668	-1.655378629	-1.779854812	-1.833618454	-1.778485435	-1.728777392	-1.718293407	-1.633440638
Gabon	0.302849602	0.251509162	0.379093681	0.309237098	0.159172196	0.250710071	0.225270371	0.113561806	0.283533509	0.369881956
Gambia, The	0.727732799	0.343258757	0.22647055	0.257035008	-0.015218968	0.061433557	0.079188015	0.147894143	0.081571587	0.085538102
Ghana	-0.253557775	-0.030763985	-0.002614194	0.172483987	0.054969382	-0.027866916	0.006186098	0.034180157	0.023118066	0.145379073
Guinea	-1.552405811	-0.812337709	-1.048361136	-1.170816532	-1.889165234	-2.3750936	-2.100300456	-2.087547405	-1.687828915	-1.427564266
Guinea-Bissau	-0.865033072	-0.529652503	-0.389144746	-0.564109778	-0.48764987	-0.446643296	-0.694282441	-0.653261382	-0.662831464	-0.702445428
Kenya	-1.24574967	-1.275803288	-1.066881069	-1.262776138	-1.106995844	-1.265734257	-1.379173132	-1.439289025	-1.192408906	-1.306946379
Lesotho	-0.170808488	0.078496115	0.38866608	0.02484973	-0.135717311	-0.390803745	-0.219485142	0.331473722	0.470169371	0.266734788
Liberia	-2.285679498	-2.229934806	-1.403390744	-1.352679893	-1.308624566	-1.246134182	-1.278229275	-1.062456872	-0.458508809	-0.495252262
Libya	-0.1709749	0.049203489	0.330881922	0.432819442	0.342832696	0.733789381	0.804670511	0.73220012	-0.052250757	-1.010474088
Madagascar	-0.311795814	0.575536676	0.197019367	-0.059581297	0.168157645	0.072221162	-0.440673847	-0.824581072	-1.101677119	-0.882845559
Malawi	-0.090997685	-0.030715317	0.086155216	0.07279523	0.109768957	0.059321829	-0.058517413	0.046200594	0.057753673	-0.070539809
Mali	0.295745086	0.247654484	0.492888418	0.195165916	0.349159791	0.186488303	0.165791189	-0.155193898	-0.282335558	-0.709878935
Mauritania	0.284680603	0.034867389	-0.076618081	-0.255641806	0.272333076	-0.215739716	-0.605379612	-1.035193969	-1.229687467	-1.186887342
Mauritius	1.042907058	0.990363305	0.970022344	1.000480822	0.767020117	0.862575456	0.889405246	0.619277056	0.539075446	0.875922355
Morocco	-0.352463743	-0.40882305	-0.301698904	-0.545881022	-0.472514299	-0.510271877	-0.597189438	-0.533015486	-0.504065075	-0.467141241
Mozambique	0.113066328	0.188778215	-0.040633479	0.109941303	0.523459926	0.339389053	0.366039152	0.557976805	0.325442454	0.271904304
Namibia	0.075850075	0.412635191	0.636167764	0.592298844	0.786947736	1.022543822	1.185568323	0.845314767	0.739478382	0.890345381
Niger	-0.239146504	0.032410279	-0.522494209	-0.473248235	-0.17329146	-0.407825413	-0.630457507	-1.110488249	-1.13444676	-0.881564338
Nigeria	-1.693727091	-1.64185172	-1.715854435	-1.646725179	-1.986902761	-1.968121173	-1.814581906	-1.845787035	-2.084171197	-1.940095499
Rwanda	-1.777997504	-1.158392879	-1.17374951	-0.9654836	-0.689943981	-0.319369186	-0.302281681	-0.472095565	-0.119754276	-0.047142644
Sao Tome and Principe	0.465753077	0.253011017	0.617454113	0.626672667	0.321601795	0.401405204	0.182694301	0.15273807	0.113380032	-0.048625863
Senegal	-0.345767439	-0.285523938	-0.018771136	-0.218073915	-0.236336411	-0.210347996	-0.110119445	-0.162379409	-0.378610979	-0.306366735
Seychelles	0.827898025	0.631497523	0.675620539	0.94526384	0.926184252	0.817082829	0.774236456	0.623301492	0.888644798	0.974338406
Sierra Leone	-0.828062105	-1.099704895	-0.427016365	-0.422079438	-0.252465732	-0.022114015	-0.205388573	-0.294484944	-0.237534432	-0.191376224
Somalia	-2.531360744	-2.654197286	-2.925435289	-2.741130786	-2.788992896	-3.253806562	-3.318882261	-3.320775248	-3.112673728	-3.07332069
South Africa	-0.319921015	-0.343221976	-0.125173751	-0.156717821	0.087614385	0.228956198	0.062748532	-0.113403103	-0.020164887	0.021086108
Sudan	-1.878176529	-2.029412924	-1.593132787	-1.980058566	-2.110567859	-2.344634015	-2.474057818	-2.681106955	-2.690758591	-2.608841171
Swaziland	0.010263986	0.063767763	0.020155723	-0.374550577	-0.29751291	0.039427877	-0.083989249	-0.001513267	-0.043594713	-0.472405223
Tanzania	-0.340763786	-0.86359356	-0.641462956	-0.566374362	-0.32034109	-0.353204063	-0.204857428	0.057099789	-0.03197695	-0.005437154
Togo	-0.052316135	-0.243217557	-0.332358044	-1.478054006	-0.560392045	-0.362560621	-0.177205062	-0.184004002	-0.196460728	-0.23506084
Tunisia	0.065466167	0.307190773	0.128791457	0.03847822	0.270976944	0.212410772	0.134712422	0.195125276	0.10725173	-0.229772297
Uganda	-1.491831489	-1.601714421	-1.296025292	-1.432040813	-1.240843796	-1.040568854	-0.974224887	-1.095896104	-1.117027977	-1.097750954
Zambia	-0.363021567	0.136151433	0.134215944	0.052908821	0.361543927	0.349680179	0.461625197	0.561695341	0.488801415	0.473646255
Zimbabwe	-1.606527586	-1.161451757	-1.287821598	-1.257964816	-0.841325562	-1.043904105	-1.152358604	-1.226427589	-1.185723626	-1.04177329
Average	-0.630640226	-0.553887785	-0.492842535	-0.538828315	-0.473020417	-0.495185487	-0.50902162	-0.495709701	-0.533175517	-0.563719509