pfloh · November 29, 2015 21:56
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>European Wood Production 2003 - 2014</title
 >		<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
 		<style type="text/css">

 			body {
 				margin: 0;
 				background-color: black;
 				font-family: Helvetica, Arial, sans-serif;
 			}

 			#container {
 				width: 700px;
 				margin-left: auto;
 				margin-right: auto;
 				margin-top: 50px;
 				margin-bottom: 50px;
 				padding: 50px;
 				background-color: black;
 				border: 2px solid grey;
 			}			

 			h1 {
 				font-size: 24px;
 				margin: 0;
 				padding: 5px;
 				color: white;
 			}

 			p {
 				font-size: 14px;
 				margin: 10px 0 10px 0;
 				padding: 5px;
 				color: white;
 			}

 			a:link {
 				text-decoration: none;
 				color: gray;
 			}

 			a:hover {
 				text-decoration: underline;
 			}

 			a:visited {
 				color: gray;
 			}

 			a:active {
 				color: steelBlue;
 			}			

 			svg {
 				background-color: black;
 			}

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

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

 		</style>
 	</head>
 	<body>

 		<div id="container">

 		<h1>European Wood Production 2003 - 2014</h1>

 		<p>'Roundwood production' (the term is used as a synonymous term for "removals") in <b>1 000 m³</b>. <br>Roundwood means all quantities of wood removed from the forest and other wooded land or other felling site. Data not available for the entire period for all countries. Source: <a href="http://ec.europa.eu/eurostat/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tag00072">EuroStat</a>, 2014</p>

 		</div>

 		<script type="text/javascript">		



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



 			//Width, height, padding
 			var w = 700;
 			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(15)
 							.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.category10();



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



 			//Load data
 			d3.csv("Roundwood_Production-EU_csv.csv", function(data) {

 			

 				//New array with all the years, for referencing later
 				var years = ["2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];

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

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

 					//Create new object with this country's name and empty array
 					dataset[i] = {
 						country: data[i].country,
 						woodProduction: []
 					};

 					//Loop through all the years
 					for (var j = 0; j < years.length; j++) {

 						//Default value, used in case no value is present
 						var amount = null;

 						// If value is not empty
 						if (data[i][years[j]]) {
 							amount = +data[i][years[j]];
 						}

 						//Add a new object to the woodProduction data array
 						//for this country
 						dataset[i].woodProduction.push({
 							x: years[j],
 							y: amount
 						});

 					}

 				}

 				//Stack the data!
 				stack(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
 				//of CO2 for that year.
 				var totals = [];

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

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




 				//Areas
 				//
 				//Now that we are creating multiple paths, we can use the
 				//selectAll/data/enter/append pattern to generate as many
 				//as needed.

 				//Make a path for each country
 				var paths = svg.selectAll("path")
 					.data(dataset)
 					.enter()
 					.append("path")
 					.attr("class", "area")
 					.attr("d", function(d) {
 						//Calculate path based on only d.woodProduction array,
 						//not all of d (which would include the country name)
 						return area(d.woodProduction);
 					})
 					.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.country;
 					});



 				//Create axes
 				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] + ",0)")
 					.call(yAxis);

 			});



 		</script>
 	</div>	

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

	body {
	margin: 0;
	background-color: black;
	font-family: Helvetica, Arial, sans-serif;
	}

	#container {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 50px;
	background-color: black;
	border: 2px solid grey;
	}

	h1 {
	font-size: 24px;
	margin: 0;
	padding: 5px;
	color: white;
	}

	p {
	font-size: 14px;
	margin: 10px 0 10px 0;
	padding: 5px;
	color: white;
	}

	a:link {
	text-decoration: none;
	color: gray;
	}

	a:hover {
	text-decoration: underline;
	}

	a:visited {
	color: gray;
	}

	a:active {
	color: steelBlue;
	}

	svg {
	background-color: black;
	}

	path:hover {
	fill: yellow;
	}

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

	.axis text {
	font-family: sans-serif;
	font-size: 12px;
	stroke: white;
	}

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

	</style>
	</head>
	<body>

	<div id="container">

	<h1>European Wood Production 2003 - 2014</h1>

	<p>'Roundwood production' (the term is used as a synonymous term for "removals") in <b>1 000 m³</b>. <br>Roundwood means all quantities of wood removed from the forest and other wooded land or other felling site. Data not available for the entire period for all countries. Source: <a href="http://ec.europa.eu/eurostat/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tag00072">EuroStat</a>, 2014</p>

	</div>

	<script type="text/javascript">



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



	//Width, height, padding
	var w = 700;
	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(15)
	.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.category10();



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



	//Load data
	d3.csv("Roundwood_Production-EU_csv.csv", function(data) {



	//New array with all the years, for referencing later
	var years = ["2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];

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

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

	//Create new object with this country's name and empty array
	dataset[i] = {
	country: data[i].country,
	woodProduction: []
	};

	//Loop through all the years
	for (var j = 0; j < years.length; j++) {

	//Default value, used in case no value is present
	var amount = null;

	// If value is not empty
	if (data[i][years[j]]) {
	amount = +data[i][years[j]];
	}

	//Add a new object to the woodProduction data array
	//for this country
	dataset[i].woodProduction.push({
	x: years[j],
	y: amount
	});

	}

	}

	//Stack the data!
	stack(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
	//of CO2 for that year.
	var totals = [];

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

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




	//Areas
	//
	//Now that we are creating multiple paths, we can use the
	//selectAll/data/enter/append pattern to generate as many
	//as needed.

	//Make a path for each country
	var paths = svg.selectAll("path")
	.data(dataset)
	.enter()
	.append("path")
	.attr("class", "area")
	.attr("d", function(d) {
	//Calculate path based on only d.woodProduction array,
	//not all of d (which would include the country name)
	return area(d.woodProduction);
	})
	.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.country;
	});



	//Create axes
	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] + ",0)")
	.call(yAxis);

	});



	</script>
	</div>

	</body>
	</html>
country	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012	2013	2014
Belgium	4765	4850	4950	5075	5015	4700	4395	4827.42	5128	6663.33
Bulgaria	4832.89	5985.67	5861.67	5992	5696	6071	4599	5668	6205	6092	5804.27	5570.05
Czech Republic	15140	15601	15510	17678	18508	16187	15502	16736	15381	15061	15331	15476
Denmark	1626.94	1516	2962.3	2358	2566	2786	2813	2669.44	2583.35		3179.76	3179.76
Germany	51182	54504	56946	62290	76728	55367	48073.27	54418.36	56141.58	52338.13	53207.43	54356.18
Estonia	10500	6800	5500	5400	4500	4860	5400	7200	7110	7290	7654.5	8460
Ireland	2683.3	2562.04	2648	2671	2710	2232	2428.77	2618	2635.33	2580.42	2759.62	2830.99
Greece	1673	1693.68	1522.86	1561.84	1742.92	1261.05	1033.9	1047.96	1196.33
Spain	16105	16290	15531	15716	14528	17027.37	13980.04	16089.4	15427.77	14656.8	15757.57	15910.86
France	52551.82	52906.45	52498.74	53266.8	54582.55	52756.57	54447.2	55807.81	55040.55	51494.71	51670.87	51670.87
Croatia	3847	3841	4018	4452	4210	4469	4242	4477	5258	5714	5436	5002.56
Italy	8219	8697.39	8690.86	8618.27	8124.97	8667.02	8080.34	7843.79	7744.46	7744.46
Cyprus	11.99	10.06	9.66	7.44	19.67	19.83	9.88	8.96	8.49	10.99	9.4	9.2
Latvia	12915.81	12754	12842.7	12844.6	12172.9	8805.75	10442.31	12533.82	12833.49	12529.59	12241.95	12597.2
Lithuania	6275	6120	6045	5870	6195	5594.38	5459.53	7096.86	7004	6921	7053	7351
Luxembourg	257.3	276.62	248.95	267.87	290.82	352.82	273.79	274.95	261.43
Hungary	5785	5660	5940	5913	5640	5276	5244	5740.28	6232.45	5946.12	6027.2	5671.06
Malta	0	0	0	0	0	0	0	0	0	0	0	0
Netherlands	1044	1026	1110	1106.68	1022.05	1117.1	1016.13	1080.59	981.8	8062.59	1108.2	1336.58
Austria	17055	16483	16471	19135	21317.34	21795.43	16727.44	17830.96	18695.67	18020.68	17389.74	17088.55
Poland	30836	32733	31944.5	32384	35934.56	34273.42	34629.17	35467.42	37179.98	38015.43	38938.84	40565
Portugal	9673	10869	10746.24	10804.64	10822.89	10168.75	9564.07	9648.36	10961.42	10710.81	10642.43
Romania	15440	15809	14501	13970	15341	13667	12556.5	13111.64	14358.63	16087.91	15194.72	15067.84
Slovenia	2591	2551	2732.82	3179.13	2881.65	2990.06	2930.22	2945.45	3387.87	3341.09	3415.18	5099.33
Slovakia	6355	7240	9302	7868.51	8131.49	9268.56	9086.99	9599.07	9212.91	8062.59	9167.98
Finland	54240.43	54398.27	52250.18	50811.62	56612.18	50670.46	41653.14	50951.53	50766.76	49966.94	56991.58	57033.45
Sweden	67100	67300	98200	64600	78200	70800	65100	72200	71900	69499	69600	70100
United Kingdom	8072	8325	8519	8424	9021	8416.46	8623.63	9718.26	10020.47	10119.55	10820.68	11184.04
Liechtenstein				25	25	28.25	25	25	26	23.33	19.22	19.33
Norway	8298	8782	9667.18	9793.5	10464.68	10323.55	8883.59	10443.08	10291.03	10572.15	11598.29	12385.81
Switzerland	4800	5132	5284.64	5701.53	5520.01	4950.36	4701.78	4938.04	4861.01	4466.39	4577.12	4709.34
Montenegro				457	457	485	364	915	915	915	915	915
Former Yugoslav Republic of Macedonia. the	812	841	822	825	634	709	639	631	597	779	691	691
Turkey	15810	16503	16185	18084	18319	19420	19300	20597	21039	21959	20858	22835