anbnyc · November 8, 2015 01:27
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Knesset Party Trends</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;
 				margin: 0;
 			}

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

 			svg {
 				background-color: white;
 			}

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

 		</style>
 	</head>
 	<body>

 		<h1>Seats in the Knesset (Israeli Parliament) by Party</h1>

 		<p>Number of Seats, Out of 120, 1988-2015 (12th - 20th Knessets). <br>In cleaning data, some party alliance names have been reduced to major party name to allow historical comparison. <br>Source: <a href="http://www.jewishvirtuallibrary.org/jsource/Politics/knessetelectionstoc.html">Jewish Virtual Library</a>, 2015</p>

 		<script type="text/javascript">		



 			//Set up stack method
 			var stack = d3.layout.stack()
 							.values(function(d) {
 								return d.results;
 							})
 							.order("reverse");



 			//Width, height, padding
 			var w = 1000;
 			var h = 600;
 			var padding = [ 20, 10, 50, 100 ];  //Top, right, bottom, left



 			//Set up date format function (years)
 			var dateFormat = d3.time.format("%Y");



 			//Set up scales
 			var xScale = d3.time.scale()
 								.range([ padding[3], w - padding[1] - padding[3] ]);
 			
 			var yScale = d3.scale.linear()
 								.range([ padding[0], h - padding[2] ]);



 			//Configure axis generators
 			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")
 							.ticks(5);

 			//Configure area generator
 			var area = d3.svg.area()
 				.x(function(d) {
 					return xScale(dateFormat.parse(d.x));
 				})
 				.y0(function(d) {
 					return yScale(d.y0);  //Updated
 				})
 				.y1(function(d) {
 					return yScale(d.y0 + d.y);  //Updated
 				});



 			//Easy colors accessible via a 10-step ordinal scale
 			var color = d3.scale.category20();



 			//Create the empty SVG image
 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);



 			//Load data
 			d3.csv("knesset.csv", function(data) {

 				//Uncomment to log the newly loaded data to the console
 				//console.log(data);

 				//New array with all the years, for referencing later
 				var parties = [];
 				var years = [];
 				
 				for (var i = 0; i < data.length; i++){
 					if (parties.indexOf(data[i].Party) == -1) {
 						parties.push(data[i].Party);
 					}
 					if (years.indexOf(data[i].Year) == -1){
 						years.push(data[i].Year);
 					}
 				}
 				
 				//console.log(parties);
 				
 				//Create a new, empty array to hold our restructured dataset
 				var dataset = [];
 				
 				for (var j = 0; j < parties.length; j++){
 				
 					dataset[j] = {
 						party: parties[j],
 						results: []
 					};
 				
 					for (var i = 0; i < years.length; i++){
 						dataset[j].results.push({
 							x: years[i],
 							y: 0
 						});
 					}
 				}
 				
 				//console.log(dataset);
 				
 				var pindex = 0;
 				var yindex = 0;

 				//Loop once for each row in data
 				for (var k = 0; k < data.length; k++) {
 				
 					pindex = parties.indexOf(data[k].Party);
 					yindex = years.indexOf(data[k].Year);
 										
 					dataset[pindex].results[yindex].y = +data[k].Seats;
 				}

 				//Stack the data!
 				stack(dataset);

 				//Uncomment to log the original data to the console
 				//console.log(data);

 				//Uncomment to log the newly restructured dataset to the console
 				//console.log(dataset);

 				//Now that the data is ready, we can check its
 				//min and max values to set our scales' domains!
 				xScale.domain([ 
 					d3.min(years, function(d) {
 						return dateFormat.parse(d);
 					}),
 					d3.max(years, function(d) {
 						return dateFormat.parse(d);
 					})
 				]);

 				//Need to recalcluate the max value for yScale  
 				//differently, now that everything is stacked.

 				//Loop once for each year, and get the total value
 				var totals = [];

 				for (i = 0; i < years.length; i++) {
 					totals[i] = 0;
 					for (j = 0; j < dataset.length; j++) {
 						totals[i] += dataset[j].results[i].y;
 					}
 				}

 				//console.log(totals);

 				yScale.domain([ d3.max(totals), 0 ]);

 				//color.domain([0,1])
 				//	.range(["red","white","blue"]);

 				//Areas
 				//Make a path for each country
 				var paths = svg.selectAll("path")
 					.data(dataset)
 					.enter()
 					.append("path")
 					.attr("class", "area")
 					.attr("d", function(d) {
 						return area(d.results);
 					})
 					.attr("stroke", "none")
 					.attr("fill", function(d, i) {
 						return color(i);
 					});

 				//Append a title with the country name (so we get easy tooltips)
 				paths.append("title")
 					.text(function(d) {
 						return d.party;
 					});

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

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

 			});


 		</script>
 	</body>
 </html>
diff --git a/knesset.csv b/knesset.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Knesset Party Trends</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;
	margin: 0;
	}

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

	svg {
	background-color: white;
	}

	path:hover {
	fill: yellow;
	}

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

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

	</style>
	</head>
	<body>

	<h1>Seats in the Knesset (Israeli Parliament) by Party</h1>

	<p>Number of Seats, Out of 120, 1988-2015 (12th - 20th Knessets). <br>In cleaning data, some party alliance names have been reduced to major party name to allow historical comparison. <br>Source: <a href="http://www.jewishvirtuallibrary.org/jsource/Politics/knessetelectionstoc.html">Jewish Virtual Library</a>, 2015</p>

	<script type="text/javascript">



	//Set up stack method
	var stack = d3.layout.stack()
	.values(function(d) {
	return d.results;
	})
	.order("reverse");



	//Width, height, padding
	var w = 1000;
	var h = 600;
	var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left



	//Set up date format function (years)
	var dateFormat = d3.time.format("%Y");



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

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



	//Configure axis generators
	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")
	.ticks(5);

	//Configure area generator
	var area = d3.svg.area()
	.x(function(d) {
	return xScale(dateFormat.parse(d.x));
	})
	.y0(function(d) {
	return yScale(d.y0); //Updated
	})
	.y1(function(d) {
	return yScale(d.y0 + d.y); //Updated
	});



	//Easy colors accessible via a 10-step ordinal scale
	var color = d3.scale.category20();



	//Create the empty SVG image
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	//Load data
	d3.csv("knesset.csv", function(data) {

	//Uncomment to log the newly loaded data to the console
	//console.log(data);

	//New array with all the years, for referencing later
	var parties = [];
	var years = [];

	for (var i = 0; i < data.length; i++){
	if (parties.indexOf(data[i].Party) == -1) {
	parties.push(data[i].Party);
	}
	if (years.indexOf(data[i].Year) == -1){
	years.push(data[i].Year);
	}
	}

	//console.log(parties);

	//Create a new, empty array to hold our restructured dataset
	var dataset = [];

	for (var j = 0; j < parties.length; j++){

	dataset[j] = {
	party: parties[j],
	results: []
	};

	for (var i = 0; i < years.length; i++){
	dataset[j].results.push({
	x: years[i],
	y: 0
	});
	}
	}

	//console.log(dataset);

	var pindex = 0;
	var yindex = 0;

	//Loop once for each row in data
	for (var k = 0; k < data.length; k++) {

	pindex = parties.indexOf(data[k].Party);
	yindex = years.indexOf(data[k].Year);

	dataset[pindex].results[yindex].y = +data[k].Seats;
	}

	//Stack the data!
	stack(dataset);

	//Uncomment to log the original data to the console
	//console.log(data);

	//Uncomment to log the newly restructured dataset to the console
	//console.log(dataset);

	//Now that the data is ready, we can check its
	//min and max values to set our scales' domains!
	xScale.domain([
	d3.min(years, function(d) {
	return dateFormat.parse(d);
	}),
	d3.max(years, function(d) {
	return dateFormat.parse(d);
	})
	]);

	//Need to recalcluate the max value for yScale
	//differently, now that everything is stacked.

	//Loop once for each year, and get the total value
	var totals = [];

	for (i = 0; i < years.length; i++) {
	totals[i] = 0;
	for (j = 0; j < dataset.length; j++) {
	totals[i] += dataset[j].results[i].y;
	}
	}

	//console.log(totals);

	yScale.domain([ d3.max(totals), 0 ]);

	//color.domain([0,1])
	// .range(["red","white","blue"]);

	//Areas
	//Make a path for each country
	var paths = svg.selectAll("path")
	.data(dataset)
	.enter()
	.append("path")
	.attr("class", "area")
	.attr("d", function(d) {
	return area(d.results);
	})
	.attr("stroke", "none")
	.attr("fill", function(d, i) {
	return color(i);
	});

	//Append a title with the country name (so we get easy tooltips)
	paths.append("title")
	.text(function(d) {
	return d.party;
	});

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

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

	});


	</script>
	</body>
	</html>
Year	Party	Votes	Pct	Seats
1988	Likud	709,305	31.1	40
1988	Labor	685,363	30	39
1988	Shas	107,709	4.7	6
1988	Agudat Yisrael	102,714	4.5	5
1988	Ratz	97,513	4.3	5
1988	National Religious Party	89,720	3.9	5
1988	Hadash	84,032	3.7	4
1988	Tehiya	70,730	3.1	3
1988	Mapam	56,345	2.5	3
1988	Tsomet	45,489	2	2
1988	Moledet	44,174	1.9	2
1988	Shinui	39,538	1.7	2
1988	Degel Hatorah	34,279	1.5	2
1988	Progressive List for Peace	33,279	1.5	1
1988	Arab Democratic Party	27,012	1.2	1
1992	Labor	906,810	34.7	44
1992	Likud	651,229	24.9	32
1992	Meretz	250,667	9.6	12
1992	Tsomet	166,366	6.4	8
1992	National Religious Party	129,663	5	6
1992	Shas	129,347	4.9	6
1992	Yahadut Hatorah	86,167	3.3	4
1992	Hadash	62,545	2.4	3
1992	Moledet	62,269	2.4	3
1992	Arab Democratic Party	40,788	1.6	2
1996	United Arab List	89,514	3	4
1996	Labor	818,741	27.5	34
1996	Likud	767,401	25.8	32
1996	Shas	259,796	8.7	10
1996	National Religious Party	240,271	8.1	9
1996	Meretz	226,275	7.5	9
1996	Yisrael Be'aliyah	174,994	5.8	7
1996	Hadash	129,455	4.4	5
1996	Yahadut Hatorah	98,657	3.3	4
1996	The Third Way	96,474	3.2	4
1996	Moledet	72,002	2.4	2
1999	United Arab List	114,810	3.4	5
1999	Labor	670,484	20.2	26
1999	Likud	468,103	14.1	19
1999	Shas	430,676	13	17
1999	Meretz	253,525	7.6	10
1999	Yisrael Be'aliyah	171,705	5.1	6
1999	Shinui	167,748	5	6
1999	Center Party	165,622	5	6
1999	National Religious Party	140,307	4.2	5
1999	Yahadut Hatorah	125,741	3.7	5
1999	HaIchud HaLeumi	100,181	3	4
1999	Hadash	87,022	2.6	3
1999	BaLad	66,103	1.9	2
1999	Am Ehad	66,143	1.9	2
1999	Yisrael Beiteinu	86,153	2.6	4
2003	United Arab List	65,551	2.08	2
2003	Likud	925,279	29.39	38
2003	Labor	455,183	14.46	19
2003	Shinui	386,535	12.28	15
2003	Shas	258,879	8.22	11
2003	HaIchud HaLeumi	173,973	5.53	7
2003	Meretz	164,122	5.21	6
2003	National Religious Party	132,370	4.2	6
2003	Yahadut Hatorah	135,087	4.29	5
2003	Hadash	93,819	2.98	3
2003	Am Ehad	86,808	2.76	3
2003	BaLaD	71,299	2.26	3
2003	Yisrael B'Aliya	67,719	2.15	2
2006	United Arab List	94,786	3	4
2006	Kadima	690,901	22.02	29
2006	Labor	472,366	15.05	19
2006	Likud	281,996	8.9	12
2006	Shas	299,054	9.5	12
2006	Ichud Leumi - Mafdal	224,083	7.14	9
2006	Gil	185,759	5.9	7
2006	Torah and Shabbat Judaism	147,091	4.7	6
2006	Meretz	118,302	3.8	5
2006	National Democratic Assembly	72,066	2.3	3
2006	Hadash	86,092	2.7	3
2006	Yisrael Beiteinu	281,880	8.9	11
2009	United Arab List	113,954	3.4	4
2009	Kadima	758,032	22.50%	28
2009	Likud	729,054	21.6	27
2009	Labor	334,900	9.9	13
2009	Shas	286,300	8.5	11
2009	National Union	112,570	3.3	4
2009	Hadash	112,130	3.3	4
2009	Meretz	99,611	3	3
2009	Jewish Home	96,765	2.9	3
2009	Balad	83,739	2.5	3
2009	United Torah Judaism	147,954	4.4	5
2009	Yisrael Beiteinu	394,577	11.7	15
2013	United Arab List	135,830	3.80%	5
2013	Likud	832,099	23.25%	31
2013	Yesh Atid	507,879	14.19%	19
2013	Labor	409,685	11.45%	15
2013	Shas	316,151	8.83%	11
2013	Jewish Home	313,646	8.76%	11
2013	Ha'Tnuah	179,818	5.02%	6
2013	Meretz	164,150	4.59%	6
2013	Hadash	111,685	3.12%	4
2013	Balad	95,312	2.66%	3
2013	Kadima	74,735	2.09%	2
2013	United Torah Judaism	189,931	5.31%	7
2015	Likud	985,408	23.40%	30
2015	Labor	786,313	18.67%	24
2015	United Arab List	446,583	10.61%	13
2015	Yesh Atid	371,602	8.82%	11
2015	Kulanu	315,360	7.49%	10
2015	Jewish Home	283,910	6.74%	8
2015	Shas	241,613	5.74%	7
2015	Meretz	165,529	3.53%	5
2015	United Torah Judaism	210,143	4.99%	6
2015	Yisrael Beiteinu	214,906	5.10%	6